New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-fidelity-ui

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-fidelity-ui - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

13

index.js

@@ -21,8 +21,3 @@ import Alert from './src/components/Alert/';

import Timeline, {
groupItemsByDate,
getDifferenceInDays,
getDateYMD,
isSameDate
} from './src/components/Timeline/';
import Timeline from './src/components/Timeline/';
import './dist/style.min.css';

@@ -35,7 +30,3 @@

filterItemsByName,
syncDropdownMenuOffset,
groupItemsByDate,
getDifferenceInDays,
getDateYMD,
isSameDate
syncDropdownMenuOffset
};

@@ -42,0 +33,0 @@

5

package.json
{
"name": "react-fidelity-ui",
"version": "0.0.12",
"version": "0.0.13",
"description": "High fidelity UI pack for ReactJS",

@@ -42,2 +42,5 @@ "main": "input.js",

},
"dependencies": {
"prop-types": "^15.6.2"
},
"scripts": {

@@ -44,0 +47,0 @@ "dist": "webpack --config webpack-prod.config.js -p",

227

README.md

@@ -22,4 +22,4 @@ <!-- Logo -->

- Simple declarative API
- Highly configurable components
- Declarative API
- Configurable components
- Semantic markup

@@ -53,11 +53,15 @@ - Atomic design

const WarningAlert = ({ isVisible = false, onHide = () => {}, onConfirm = () => {} }) => (
const WarningAlert = ({ isVisible, onCancel, onConfirm }) => (
<Alert
type="warning" // string, default = 'info'
title="Warning alert" // string, default = ''
isConfirm={true} // boolean, default = false
content="Default warning alert" // string, default = ''
title="Warning alert" // string, REQUIRED
subtitle="Default warning alert" // string, default = ''
closeTitle="Close" // string, default = 'Close'
cancelText="Cancel" // string, default = 'Cancel'
confirmText="OK" // string, default = 'OK'
icon="tick" // string, default = '', when '', no icon is displayed
isConfirm={false} // boolean, default = false
isVisible={isVisible} // boolean, default = false
onCancel={() => onHideAlert()} // function, default = () => {}
onConfirm={() => onConfirm()} // function, default = () => {}
onCancel={() => onCancel()} // function, default = () => {}, triggered on close/cancel events
onConfirm={() => onConfirm()} // function, default = () => {}, triggered on confirm event
/>

@@ -76,8 +80,8 @@ );

const BreadcrumbsComponent = ({ items ) => (
const BreadcrumbsBox = (({ items }) => (
<Breadcrumbs
items={items} // array of objects, with schema { url, name, target = '_self', isSelected = false }, REQUIRED
isLastActive={true} // boolean, default = true, when set to {false}, you need to pass items with schema { url, name, isSelected = false }
isToggleableOnMobile={true} // boolean, default = true
isStackedOnMobile={false} // boolean, default = true
isLastActive={true} // boolean, default = true, when set to {false}, you need to pass items with schema { url: string, name: string, isSelected: boolean }
items={items} // array of objects, with schema [{ url: '', name: '' }], required
onChange={({ url, name, isSelected, event }) => {}} // function, default = () => {}

@@ -97,9 +101,10 @@ />

const CheckboxComponent = ({ isChecked = false, onToggle = () => {} ) => (
const CheckboxComponent = ({ isChecked, onChange }) => (
<Checkbox
id="test-abc" // string/number, default = autogenerated uid
isChecked={isChecked} // boolean, default = false
id="checkbox" // string, default = autogenerated uid
labelText="Tick to activate" // string, default = ''
labelTitle="Tick to activate" // string, default = ''
onChange={event => onToggle(event)} // function, default = () => {}
isChecked={isChecked} // boolean, default = false
isDisabled={false} // boolean, default = false
onChange={event => onChange(event)} // function, default = () => {}
/>

@@ -118,10 +123,18 @@ );

const { changeSingleSelect, changeMultiSelect } = utils;
const { changeSingleSelect } = utils;
const DropdownComponent = ({ items, onChangeItems }) => (
<Dropdown
title="Dropdown" // string, default = ''
text="Text" // string, default = ''
title="Dropdown" // string, REQUIRED
subtitle="Dropdown subtitle" // string, default = ''
triggerText="Trigger text" // string, default = ''
items={items} // array of objects, with schema [{ name: string, isSelected: boolean }], required
items={items} // array of objects, with schema [{ name: string, isSelected: boolean }], REQUIRED
isFilterable={false} // boolean, default = ''
filterPlaceholder="Filter results" // string, default = ''
isAddable={false} // boolean, default = false
addItemTitle="Add item" // string, default = ''
isCloseOnSelect={true} // boolean, default = false
isDisabled={false} // booleam, default = false
isLoading={false} // boolean, default = false
onDisplaySelectedItems={selectedItems => selectedItems.length} // function, default = undefined, when undefined, the function is not invoked
onChange={({ name }, isSelected) => {

@@ -131,3 +144,6 @@ // update items using multi select logic, using `name` as unique identifier

onChangeItems({ items: nextItems });
}}
}} // function, REQUIRED
onAddItem={filterText => {}) // function, default = () => {}
onFilter{filterText => {}) // function, default = () => {}
onToggleMenu{isMenuOpened => {}) // function, default = () => {}
/>

@@ -138,4 +154,20 @@ );

### Icon
Icon component exposing svg icons.
Icon component exposing svg icons. Available icon names:
- add
- comment
- downvote
- edit
- filter
- more
- next
- notification
- previous
- remove
- search
- settings
- stats
- tick
- upvote
#### Example

@@ -148,4 +180,5 @@

const UpvoteIcon = () => (
<Icon
name="upvote" // string, default = 'comment'
<Icons
name="upvote" // string, REQUIRED, one of the above icon names
className="upvote-icon" // string, default = ''
title="Upvote icon" // string, default = ''

@@ -165,3 +198,3 @@ />

const LoadingSpinner = ({ isLoading = false }) => (
const Spinner = ({ isLoading }) => (
<Loader

@@ -182,6 +215,4 @@ isLoading={isLoading} // boolean, default = false

const ConfirmModal = ({ isModalActive = false, onCancel = () => {}, onConfirm = () => {} }) => (
const ConfirmModal = ({ isActive, onCancel, onConfirm }) => (
<Modal
isActive={isModalActive} // boolean, default = false
isCloseWithEscapeKey={false} // boolean, default = true
content={() => (

@@ -191,11 +222,11 @@ <Panel

item={{
title: 'Modal title', // string, default = ''
content: 'Are you sure you want to proceed?', // string, default = ''
onCancel // function, default = undefined
onConfirm // function, default = undefined
title: 'Please confirm'
content: 'Are you sure you want to proceed?'
onCancel
onConfirm
}}
/>
)} // function, default = () => {}
onCancel={onCancel} // function, default = () => {}
onConfirm={onConfirm} // function, default = () => {}
)} // function/component, REQUIRED
isActive={isActive} // boolean, default = false
onEscapeKey={onCancel} // function, default = () => {}
/>

@@ -206,3 +237,3 @@ );

### Notification
Notification component displaying static notifications. Notification offers 4 distinct types - info (default), success, warning and error.
Notification component displaying static notifications. Notification has 4 distinct types - info (default), success, warning and error.

@@ -215,6 +246,6 @@ #### Example

const SuccessNotification = ({ isLoading }) => (
const SuccessNotification = () => (
<Notification
type="success" // string, default = 'info'
text="Success" // string, default = ''
note="Success" // string, REQUIRED
title="Success title" // string, default = ''

@@ -227,3 +258,3 @@ icon="upvote" // string, default = 'notification'

### Panel
General purpose panel component. Panel supports a number of distinctive themes via the `theme` option.
General purpose panel component. Panel supports a number of distinctive template via the `template` option.

@@ -233,27 +264,28 @@ #### Example

```javascript
import React from 'react';
import React, { Fragment } from 'react';
import { Panel } from 'react-fidelity-ui';
const Panels = ({ isLoading }) => (
<div data-component="panels">
const Panels = () => (
<Fragment>
<Panel
template="card" // string, default = 'default'
template="default" // string, default = 'default'
item={{
name: 'Card panel', // string, required
date: '2018-06-24' // string, required
name: 'Default panel', // string, REQUIRED
date: '2018-06-24', // string, REQUIRED
}}
/>
<Panel
template="stat"
item={{
name: 'Default panel', // string, required
date: '2018-06-24', // string, required
thumbnail: 'stats', // string, required
note: 'Some note' // string/function
icon: 'likes', // string, REQUIRED
count: 2 // number, REQUIRED
}}
/>
<Panel
template="stat"
template="card"
item={{
icon: 'stats', // string, required
count: 2 // string/number, required
thumbnail: 'image-url/example-image.jpg', // string, REQUIRED
name: 'Card panel', // string, REQUIRED
note: 'Note', // string/function, REQUIRED
date: '2018-06-24' // string, REQUIRED
}}

@@ -264,9 +296,14 @@ />

item={{
title: 'Modal title', // string, default = ''
title: 'Modal title', // string, REQUIRED
closeTitle: 'Close', // string, default = ''
content: 'Lorem ipsum dolor sit amet', // string, default = ''
onCancel // function, default = undefined
onConfirm // function, default = undefined
cancelText: 'Cancel', // string, default = 'Cancel'
cancelTitle: 'Close', // string, default = 'Close'
confirmText: 'OK', // string, default = 'OK'
confirmTitle: 'OK', // string, default = ''
onCancel: () => {} // function, REQUIRED
onConfirm: () => {} // function, REQUIRED
}}
/>
</div>
</Fragment>
);

@@ -284,3 +321,3 @@ ```

const FilterTag = () => (
const Alerts = () => (
<StackableAlerts>

@@ -319,6 +356,8 @@ <Alert

const FilterTag = ({ id, name, onRemove = () => {} }) => (
const TagBox = ({ name, onRemove }) => (
<Tag
name={tag.name} // string, required
onRemove={() => onRemove(tag.id)} // function, default = undefined, not invoked when undefined
name={name} // string, REQUIRED
title="Tag" // string, default = ''
removeTitle="Remove" // string, default = ''
onRemove={name => {}} // function, REQUIRED
/>

@@ -340,6 +379,6 @@ );

<Timeline
title="Timeline" // string, default = ''
items={items} // array of objects, with schema [{ [dateField]: string }], REQUIRED
title="Timeline" // string, REQUIRED
direction="horizontal" // string, default = 'vertical'
targetKey="created_at" // string, the key containing date information in your items array of objects, [dateField], required
items={items} // array of objects, with schema [{ [dateField]: string }], required
targetKey="created_at" // string, the key containing date information in your items array of objects, [dateField], REQUIRED
displayItem={({ name, thumbnail, note, date }) => (

@@ -350,3 +389,3 @@ <Panel

/>
)} // function, default = () => {}
)} // function, REQUIRED
formatDate={date => moment(date).format('HH:mm')}} // function, default = undefined, not invoked when undefined

@@ -357,1 +396,63 @@ />

## Styling
You can overwrite any of the base styles for any component using css/sass/StyledComponents. Here's how to do this with sass:
```javascript
import React from 'react';
import { Alert } from 'react-fidelity-ui';
const ErrorAlert = ({ isVisible, onClose }) => (
<div className="alert error">
<Alert
type="error"
title="Error"
subtitle="Lorem ipsum dolor sit amet"
isVisible={isVisible}
onCancel={onClose}
/>
</div>
);
```
```sass
.alert.error {
[data-component="alert"] {
// overwrite error styles
&[data-alert-type="error"] {
background-color: red;
color: white;
}
// overwrite title and subtitle styles
> .component-header {
.title {
text-transform: uppercase;
}
.subtitle {
font-size: 12px;
}
}
}
}
```
For consistency, all `fidelity-ui` components follow this pattern for their html markup:
```jsx
<div data-component="{component-name}">
<div className="component-header">
header content
</div>
<div className="component-body>
body content
</div>
<div className="component-footer">
footer content
</div>
</div>
```
Some components may lack certain parts of the above html schema. For instance, component `Tag` has only `component-body` html wrapper.

103

src/components/_App/script/App.js

@@ -144,45 +144,47 @@ import React, { Component } from 'react';

<StackableAlerts>
<Alert
type="info"
title="Alert"
content="Info alert with 'settings' icon"
isVisible={isInfoAlertVisible}
isConfirm={true}
icon="settings"
onCancel={() => {
this.setState({ isInfoAlertVisible: false });
}}
onConfirm={() => {
this.setState({ isInfoAlertVisible: false });
}}
/>
<Alert
type="success"
title="Success"
content="Default success alert"
isVisible={isSuccessAlertVisible}
onCancel={() => {
this.setState({ isSuccessAlertVisible: false });
}}
/>
<Alert
type="warning"
title="Warning"
content="Default warning alert"
isVisible={isWarningAlertVisible}
onCancel={() => {
this.setState({ isWarningAlertVisible: false });
}}
/>
<Alert
type="error"
title="Error"
content="Default error alert"
isVisible={isErrorAlertVisible}
onCancel={() => {
this.setState({ isErrorAlertVisible: false });
}}
/>
</StackableAlerts>
<div className="demo">
<StackableAlerts>
<Alert
type="info"
title="Alert"
subtitle="Info alert with 'settings' icon"
isVisible={isInfoAlertVisible}
isConfirm={true}
icon="settings"
onCancel={() => {
this.setState({ isInfoAlertVisible: false });
}}
onConfirm={() => {
this.setState({ isInfoAlertVisible: false });
}}
/>
<Alert
type="success"
title="Success"
subtitle="Default success alert"
isVisible={isSuccessAlertVisible}
onCancel={() => {
this.setState({ isSuccessAlertVisible: false });
}}
/>
<Alert
type="warning"
title="Warning"
subtitle="Default warning alert"
isVisible={isWarningAlertVisible}
onCancel={() => {
this.setState({ isWarningAlertVisible: false });
}}
/>
<Alert
type="error"
title="Error"
subtitle="Default error alert"
isVisible={isErrorAlertVisible}
onCancel={() => {
this.setState({ isErrorAlertVisible: false });
}}
/>
</StackableAlerts>
</div>
</div>

@@ -229,4 +231,4 @@

title="Dropdown"
text="Text"
triggerText="Trigger text"
subtitle="Dropdown subtitle"
triggerText="Select tags"
addItemTitle="Add"

@@ -321,4 +323,3 @@ isFilterable={true}

)}
onCancel={() => this.setState({ isModalActive: false })}
onConfirm={() => this.setState({ isModalActive: false })}
onEscapeKey={() => this.setState({ isModalActive: false })}
/>

@@ -333,6 +334,6 @@ </div>

<div className="demo">
<Notification type="info" text="Info" />
<Notification type="success" text="Success" icon="upvote" />
<Notification type="warning" text="Warning" icon="edit" />
<Notification type="error" text="Error" icon="more" />
<Notification type="info" note="Info" />
<Notification type="success" note="Success" icon="upvote" />
<Notification type="warning" note="Warning" icon="edit" />
<Notification type="error" note="Error" icon="more" />
</div>

@@ -339,0 +340,0 @@ </div>

2

src/components/_App/script/Utils.js

@@ -15,2 +15,3 @@ import moment from 'moment/moment';

name: `Item ${i + 1}`,
title: `Item ${i + 1}`,
url: 'https://google.com',

@@ -20,2 +21,3 @@ isSelected,

note: 'some note',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
created_at: isNewDate

@@ -22,0 +24,0 @@ ? moment(new Date()).subtract(subTrackedDays, 'days')

45

src/components/Alert/script/Alert.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon/';

@@ -49,14 +50,3 @@ import { isHovered, isObj } from '../../../utils/ammo';

render() {
const {
type = 'info',
title = '',
content = '',
closeText = 'Close',
cancelText = 'Cancel',
confirmText = 'OK',
icon = '',
isConfirm = false,
onCancel = () => {},
onConfirm = () => {}
} = this.props;
const { type, title, subtitle, closeTitle, cancelText, confirmText, icon, isConfirm, onCancel, onConfirm } = this.props;
const { isAlertVisible } = this.state;

@@ -81,4 +71,4 @@

</div>
<div className="content">
{content}
<div className="subtitle">
{subtitle}
</div>

@@ -88,3 +78,3 @@

className="trigger close-alert"
title={closeText}
title={closeTitle}
onClick={onCancel}

@@ -118,2 +108,27 @@ >

Alert.propTypes = {
type: PropTypes.string,
title: PropTypes.string.isRequired,
subtitle: PropTypes.string,
closeTitle: PropTypes.string,
cancelText: PropTypes.string,
confirmText: PropTypes.string,
icon: PropTypes.string,
isConfirm: PropTypes.bool,
onCancel: PropTypes.func,
onConfirm: PropTypes.func
};
Alert.defaultProps = {
type: 'info',
subtitle: '',
closeTitle: 'Close',
cancelText: 'Close',
confirmText: 'OK',
icon: '',
isConfirm: false,
onCancel: () => {},
onConfirm: () => {}
};
export default Alert;

35

src/components/Breadcrumbs/script/Breadcrumbs.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon/';
import { isFunc, uid } from '../../../utils/ammo';
import { uid } from '../../../utils/ammo';

@@ -16,3 +17,3 @@ class Breadcrumbs extends Component {

render() {
const { items, isLastActive = true, isToggleableOnMobile = true, isStackedOnMobile = true, onChange } = this.props;
const { items, isLastActive, isToggleableOnMobile, isStackedOnMobile, onChange } = this.props;
const { isMobileViewOpened } = this.state;

@@ -26,4 +27,4 @@

<div
className={`component ${toggleableOnMobile} ${mobileViewOpened} ${stackedOnMobile}`}
data-component="breadcrumbs"
className={`${toggleableOnMobile} ${mobileViewOpened} ${stackedOnMobile}`}
>

@@ -38,3 +39,3 @@ <button

<ol className="component-items">
{items.map(({ url, name, isSelected = false, target = '_self' }, index) => (
{items.map(({ url = '', name = '', target = '_self', isSelected = false }, index) => (
<li

@@ -49,6 +50,4 @@ key={uid()}

onClick={event => {
if (isFunc(onChange)) {
const isItemSelected = (isSelected && !isLastActive) || (isLastActive && index === items.length - 1);
onChange({ url, name, isSelected: isItemSelected, event });
}
const isItemSelected = (isSelected && !isLastActive) || (isLastActive && index === items.length - 1);
onChange({ url, name, isSelected: isItemSelected, event });
}}

@@ -68,2 +67,22 @@ >

Breadcrumbs.propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
url: PropTypes.string,
name: PropTypes.string,
target: PropTypes.string,
isSelected: PropTypes.bool
})).isRequired,
isLastActive: PropTypes.bool,
isToggleableOnMobile: PropTypes.bool,
isStackedOnMobile: PropTypes.bool,
onChange: PropTypes.func
};
Breadcrumbs.defaultProps = {
isLastActive: true,
isToggleableOnMobile: true,
isStackedOnMobile: true,
onChange: () => {}
};
export default Breadcrumbs;

24

src/components/Checkbox/script/Checkbox.js
import React from 'react';
import PropTypes from 'prop-types';
import { uid } from '../../../utils/ammo';
const Checkbox = ({ id = uid(), labelText = '', labelTitle = '', isChecked = false, isDisabled = false, onChange = () => {} }) => (
const Checkbox = ({ id, labelText = '', labelTitle = '', isChecked = false, isDisabled = false, onChange = () => {} }) => (
<div data-component="checkbox">

@@ -19,2 +20,23 @@ <input

Checkbox.propTypes = {
id: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
labelText: PropTypes.string,
labelTitle: PropTypes.string,
isChecked: PropTypes.bool,
isDisabled: PropTypes.bool,
onChange: PropTypes.func
};
Checkbox.defaultProps = {
id: uid(),
labelText: '',
labelTitle: '',
isChecked: false,
isDisabled: false,
onChange: () => {}
};
export default Checkbox;

74

src/components/Dropdown/script/Dropdown.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon/';

@@ -27,3 +28,3 @@ import Loader from '../../Loader/';

attachClickMonitor() {
window.addEventListener('click', this.closeViaOutsideClick, false);
window.addEventListener('click', this.closeViaOutsideClick);
}

@@ -35,3 +36,3 @@

detachClickMonitor() {
window.addEventListener('click', this.closeViaOutsideClick, false);
window.addEventListener('click', this.closeViaOutsideClick);
}

@@ -92,16 +93,16 @@

const {
triggerText = '',
title,
text,
subtitle,
triggerText,
items,
filterPlaceholder = '',
addItemTitle = '',
isCloseOnSelect = false,
isDisabled = false,
isFilterable = false,
isLoading = false,
isAddable = false,
filterPlaceholder,
addItemTitle,
isCloseOnSelect,
isDisabled,
isFilterable,
isLoading,
isAddable,
onDisplaySelectedItems,
onChange = () => {},
onAddItem = () => {}
onChange,
onAddItem
} = this.props;

@@ -114,4 +115,4 @@ const { filterText, isMenuOpened } = this.state;

<div
data-component="dropdown"
className={`${isDisabled ? 'disabled' : ''}`}
data-component="dropdown"
title={triggerText}

@@ -123,2 +124,3 @@ ref={node => {

<div
role="button"
className={`trigger toggle-menu ${isMenuOpened ? 'active' : ''}`}

@@ -154,5 +156,5 @@ onClick={() => this.toggleMenu()}

)}
{text && (
<span className="component-text">
{text}
{subtitle !== '' && (
<span className="component-subtitle">
{subtitle}
</span>

@@ -224,2 +226,40 @@ )}

Dropdown.propTypes = {
title: PropTypes.string.isRequired,
subtitle: PropTypes.string,
triggerText: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string,
isSelected: PropTypes.bool
})).isRequired,
isFilterable: PropTypes.bool,
filterPlaceholder: PropTypes.string,
isAddable: PropTypes.bool,
addItemTitle: PropTypes.string,
isCloseOnSelect: PropTypes.bool,
isDisabled: PropTypes.bool,
isLoading: PropTypes.bool,
onDisplaySelectedItems: PropTypes.any,
onChange: PropTypes.func.isRequired,
onAddItem: PropTypes.func,
onFilter: PropTypes.func,
onToggleMenu: PropTypes.func
};
Dropdown.defaultProps = {
subtitle: '',
triggerText: '',
isFilterable: false,
filterPlaceholder: '',
isAddable: false,
addItemTitle: '',
isCloseOnSelect: false,
isDisabled: false,
isLoading: false,
onDisplaySelectedItems: undefined,
onAddItem: () => {},
onFilter: () => {},
onToggleMenu: () => {}
};
export default Dropdown;

20

src/components/Icon/script/Icon.js
import React from 'react';
import PropTypes from 'prop-types';
import '../../../icons/icon-sprite.svg';
const Icon = ({ name = 'comment', className = '', title = '' }) => (
<div className={`component ${className}`} data-component="icon" title={title}>
const Icon = ({ name, className, title }) => (
<div
data-component="icon"
className={`component ${className}`}
title={title}
>
<svg className="icon component-icon">

@@ -14,2 +19,13 @@ <use xlinkHref={`#icon-sprite_icon-${name}`}>

Icon.propTypes = {
name: PropTypes.string.isRequired,
className: PropTypes.string,
title: PropTypes.string
};
Icon.defaultProps = {
className: '',
title: ''
};
export default Icon;

11

src/components/Loader/script/Loader.js
import React from 'react';
import PropTypes from 'prop-types';
const Loader = ({ isLoading = false }) => (
const Loader = ({ isLoading }) => (
<div

@@ -14,2 +15,10 @@ data-component="loader"

Loader.propTypes = {
isLoading: PropTypes.bool
};
Loader.defaultProps = {
isLoading: false
};
export default Loader;

64

src/components/Modal/script/Modal.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Modal extends Component {
state = {};
componentWillMount() {
const { isClosedWithEscapeKey = true } = this.props;
if (!isClosedWithEscapeKey) {
return false;
}
this.attachKeydownMonitor();

@@ -19,6 +14,2 @@ }

componentWillUnmount() {
const { isClosedWithEscapeKey = true } = this.props;
if (!isClosedWithEscapeKey) {
return false;
}
this.detachKeydownMonitor();

@@ -33,3 +24,3 @@ }

attachKeydownMonitor() {
window.addEventListener('keydown', this.closeViaKeyDown);
window.addEventListener('keydown', this.handleEscapeKeyPress);
}

@@ -41,11 +32,12 @@

detachKeydownMonitor() {
window.addEventListener('keydown', this.closeViaKeyDown);
window.addEventListener('keydown', this.handleEscapeKeyPress);
}
/**
* @description Close via key down
* @description Handle escape key press
*/
closeViaKeyDown = event => {
handleEscapeKeyPress = event => {
const { onEscapeKey } = this.props;
if (event.key === 'Escape') {
this.onCancel({ isClosedWithEscapeKey: true });
onEscapeKey();
}

@@ -66,28 +58,13 @@ };

/**
* @description On cancel
* @param isClosedWithEscapeKey
*/
onCancel = ({ isClosedWithEscapeKey = false }) => {
const { onCancel = () => {} } = this.props;
onCancel(isClosedWithEscapeKey);
};
/**
* @description On confirm
*/
onConfirm = () => {
const { onConfirm = () => {} } = this.props;
onConfirm();
};
render() {
const { content = () => {}, className = '', isActive = false } = this.props;
const { content, className, isActive } = this.props;
return (
<div className={`${className} ${isActive ? 'active' : ''}`} data-component="modal" role="dialog">
<div
data-component="modal"
role="dialog"
className={`${className} ${isActive ? 'active' : ''}`}
>
<div className="component-body">
<div className="component-content">
{content()}
</div>
{content()}
</div>

@@ -99,2 +76,15 @@ </div>

Modal.propTypes = {
content: PropTypes.func.isRequired,
className: PropTypes.string,
isActive: PropTypes.bool,
onEscapeKey: PropTypes.func
};
Modal.defaultProps = {
className: '',
isActive: false,
onEscapeKey: () => {}
};
export default Modal;

20

src/components/Notification/script/Notification.js
import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon/';
const Notification = ({ type = 'info', text = '', title = '', icon = 'notification' }) => (
const Notification = ({ type, note, title, icon }) => (
<div
title={title !== '' ? title : text}
data-component="notification"
data-notification={type}
title={title !== '' ? title : title}
>
<Icon name={icon} />
<span className="text">
{text}
{note}
</span>

@@ -17,2 +18,15 @@ </div>

Notification.propTypes = {
type: PropTypes.string,
note: PropTypes.string.isRequired,
title: PropTypes.string,
icon: PropTypes.string
};
Notification.defaultProps = {
type: 'info',
title: '',
icon: 'notification'
};
export default Notification;

41

src/components/Panel/script/Panel.js
import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon/';
import { isFunc, isStr } from '../../../utils/ammo';
const Panel = ({ template = 'default', item }) => {
const Panel = ({ template, item }) => {
const getDefaultPanel = ({ name, date }) => (

@@ -115,2 +116,40 @@ <div className="component-body">

Panel.propTypes = {
template: PropTypes.string,
item: PropTypes.oneOfType([
PropTypes.shape({
name: PropTypes.string,
date: PropTypes.string
}),
PropTypes.shape({
icon: PropTypes.string,
count: PropTypes.number
}),
PropTypes.shape({
thumbnail: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
note: PropTypes.oneOf([
PropTypes.string,
PropTypes.func
]).isRequired,
date: PropTypes.string.isRequired
}),
PropTypes.shape({
title: PropTypes.string.isRequired,
closeTitle: PropTypes.string,
content: PropTypes.string,
cancelText: PropTypes.string,
confirmText: PropTypes.string,
cancelTitle: PropTypes.string,
confirmTitle: PropTypes.string,
onCancel: PropTypes.func.isRequired,
onConfirm: PropTypes.func.isRequired
})
]).isRequired
};
Panel.defaultProps = {
template: 'default'
};
export default Panel;

28

src/components/Tag/script/Tag.js
import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon/';
import { isFunc } from '../../../utils/ammo';
const Tag = ({ name, onRemove }) => (
<div data-component="tag" title={`Tag '${name}'`}>
const Tag = ({ name, title, removeTitle, onRemove }) => (
<div
data-component="tag"
title={title}
>
<div className="component-body">
<span className="tag-name">{name}</span>
<span className="tag-name">
{name}
</span>
{isFunc(onRemove) && (
<button
className="trigger remove-tag"
title={`Remove tag '${name}'`}
title={removeTitle}
onClick={event => {
event.preventDefault();
event.stopPropagation();
onRemove();
onRemove(name);
}}

@@ -26,2 +32,14 @@ >

Tag.propTypes = {
name: PropTypes.string.isRequired,
title: PropTypes.string,
removeTitle: PropTypes.string,
onRemove: PropTypes.func.isRequired
};
Tag.defaultProps = {
title: '',
removeTitle: ''
};
export default Tag;

30

src/components/Timeline/script/Timeline.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon/';

@@ -106,3 +107,3 @@ import Dropdown from '../../Dropdown/';

render() {
const { title = '', targetKey, direction = 'vertical', displayItem = () => {}, formatDate } = this.props;
const { title, targetKey, direction, displayItem = () => {}, formatDate } = this.props;
const { groupedItems, sortingOptions } = this.state;

@@ -153,7 +154,10 @@ const { length } = groupedItems;

<span className="timeline-item-date" title="Timeline date">
{isFunc(formatDate) ? formatDate(items[0][targetKey]) : new Date(items[0][targetKey]).toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
})}
{isFunc(formatDate)
? formatDate(items[0][targetKey])
: new Date(items[0][targetKey]).toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
})
}
</span>

@@ -219,2 +223,16 @@ )}

Timeline.propTypes = {
items: PropTypes.array.isRequired,
title: PropTypes.string.isRequired,
targetKey: PropTypes.string.isRequired,
direction: PropTypes.string,
displayItem: PropTypes.func.isRequired,
formatDate: PropTypes.any
};
Timeline.defaultProps = {
direction: 'vertical',
formatDate: undefined,
};
export default Timeline;
src/components/Radio/index.js
src/components/Radio/script/Radio.js
src/components/Radio/style/Radio.scss
.eslintrc

Sorry, the diff of this file is not supported yet

bundle/script.js

Sorry, the diff of this file is too big to display

bundle/style.css

Sorry, the diff of this file is not supported yet

dist/script.min.js

Sorry, the diff of this file is too big to display

dist/style.min.css

Sorry, the diff of this file is not supported yet

src/components/_App/style/base.scss

Sorry, the diff of this file is not supported yet

src/components/_App/style/global.scss

Sorry, the diff of this file is not supported yet

src/components/Alert/style/Alert.scss

Sorry, the diff of this file is not supported yet

src/components/Breadcrumbs/style/Breadcrumbs.scss

Sorry, the diff of this file is not supported yet

src/components/Dropdown/style/Dropdown.scss

Sorry, the diff of this file is not supported yet

src/components/Loader/style/Loader.scss

Sorry, the diff of this file is not supported yet

src/components/Tag/style/Tag.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc