` element */
23 | text: PropTypes.string,
24 | /** Providing a alt if `src` exits */
25 | alt: PropTypes.string,
26 | /** Set the width of the avatar */
27 | width: PropTypes.number,
28 | /** Set the height of the avatar */
29 | height: PropTypes.number,
30 | /**
31 | * You can use a custom element type for this component.
32 | * @default div
33 | * */
34 | as: PropTypes.elementType,
35 | };
36 |
37 | const defaultProps = {
38 | size: 'medium',
39 | alt: 'Avatar',
40 | };
41 |
42 | const Avatar = React.forwardRef(({ className, size, name, src, alt, height, width, text, as: Component = 'div', ...props }, ref) => {
43 | let nameOri = name;
44 | let srcOri = src;
45 | let textOri = text;
46 | if (srcOri) {
47 | nameOri = false;
48 | textOri = false;
49 | } else if (textOri) {
50 | nameOri = false;
51 | } else if (nameOri) {
52 | srcOri = Plugins
53 | .getPlugins(PluginType.ASSET)
54 | .traverseCall('getAsset', 'avatar', nameOri)
55 | .find(asset => !!asset);
56 | }
57 | const heightStyle = {
58 | width: width && width,
59 | height: height && height,
60 | };
61 | const mergeProps = {
62 | ref,
63 | style: { ...props.style, ...heightStyle },
64 | ...props,
65 | };
66 | return (
67 |
77 | {srcOri && (
78 | 
79 | )}
80 | {textOri && (
81 | {textOri}
82 | )}
83 |
84 | );
85 | });
86 |
87 |
88 | Avatar.displayName = 'Avatar';
89 | Avatar.defaultProps = defaultProps;
90 | Avatar.propTypes = propTypes;
91 | export default Avatar;
92 |
--------------------------------------------------------------------------------
/src/components/Badge/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 |
5 | const propTypes = {
6 | /** The Badge visual variant */
7 | variant: PropTypes.oneOf([
8 | 'default',
9 | 'white',
10 | 'black',
11 | 'primary',
12 | 'primary_subtle',
13 | 'warning',
14 | 'warning_subtle',
15 | 'positive',
16 | 'positive_subtle',
17 | 'information',
18 | 'information_subtle',
19 | 'negative',
20 | 'negative_subtle',
21 | ]),
22 |
23 | /** Fixed className for text color, just available for variant: `primary`, `primary_subtle` */
24 | textClassName: PropTypes.oneOfType([
25 | PropTypes.string,
26 | PropTypes.arrayOf(PropTypes.string),
27 | ]),
28 | /**
29 | * You can use a custom element type for this component.
30 | * @default span
31 | */
32 | as: PropTypes.elementType,
33 | };
34 | const defaultProps = {
35 | variant: 'default',
36 | };
37 |
38 |
39 | const variantsTextClassName = {
40 | primary: 'u-textWhite hover:u-textWhite',
41 | primary_subtle: 'u-textPrimary hover:u-textPrimary',
42 | };
43 |
44 | const variantsClassName = {
45 | default: 'u-textGray hover:u-textGray u-backgroundUltraLight',
46 | white: 'u-texDark hover:u-texDark u-backgroundWhite',
47 | black: 'u-textWhite hover:u-textWhite u-backgroundBlack',
48 | primary: 'u-backgroundPrimary',
49 | primary_subtle: 'u-backgroundPrimaryLighter',
50 | information: 'u-textWhite hover:u-textWhite u-backgroundInformation',
51 | information_subtle: 'u-textInformation hover:u-textInformation u-backgroundInformationLighter',
52 | warning: 'u-textDark hover:u-textDark u-backgroundWarning',
53 | warning_subtle: 'u-textDark hover:u-textDark u-backgroundWarningLighter',
54 | positive: 'u-textWhite hover:u-textWhite u-backgroundPositive',
55 | positive_subtle: 'u-textPositive hover:u-textPositive u-backgroundPositiveLighter',
56 | negative: 'u-textWhite hover:u-textWhite u-backgroundNegative',
57 | negative_subtle: 'u-textNegative hover:u-textNegative u-backgroundNegativeLighter',
58 | };
59 |
60 | const Badge = React.forwardRef(({ className, textClassName, variant, as: Component = 'span', ...props }, ref) => (
61 |
72 | ));
73 |
74 | Badge.displayName = 'Badge';
75 | Badge.defaultProps = defaultProps;
76 | Badge.propTypes = propTypes;
77 | export default Badge;
78 |
--------------------------------------------------------------------------------
/src/components/Breadcrumb/Item.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import PropTypes from 'prop-types';
4 | import SafeAnchor from 'components/SafeAnchor';
5 |
6 | const propTypes = {
7 |
8 | /**
9 | * `href` attribute for the inner `a` element
10 | * @default #
11 | */
12 | href: PropTypes.string,
13 | /**
14 | * Non-render the SafeAnchor
15 | */
16 | noHref: PropTypes.bool,
17 | /**
18 | * `title` attribute for the inner `a` element
19 | */
20 | title: PropTypes.node,
21 | /**
22 | * `target` attribute for the inner `a` element
23 | */
24 | target: PropTypes.string,
25 |
26 | };
27 | const defaultProps = {
28 |
29 | };
30 |
31 | const Item = React.forwardRef(({ className, children, noHref, position, schema, isLast, ...props }, ref) => {
32 | const Component = isLast || noHref ? 'span' : SafeAnchor;
33 | return (
34 |
41 | {schema ? (
42 |
43 |
51 | {children}
52 |
53 |
54 |
55 | ) : (
56 |
63 | {children}
64 |
65 | )}
66 |
67 | );
68 | });
69 |
70 | Item.displayName = 'BreadcrumbItem';
71 | Item.defaultProps = defaultProps;
72 | Item.propTypes = propTypes;
73 | export default Item;
74 |
--------------------------------------------------------------------------------
/src/components/Breadcrumb/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import Item from './Item';
5 |
6 | const propTypes = {
7 | /** Enable Structured Data `https://schema.org/BreadcrumbList` */
8 | schema: PropTypes.bool,
9 | };
10 | const defaultProps = {
11 | schema: false,
12 | };
13 |
14 | const Breadcrumb = React.forwardRef(({ className, schema, children, ...props }, ref) => {
15 | let schemasList;
16 | let schemasItem;
17 | if (schema) {
18 | schemasList = {
19 | itemScope: true,
20 | itemType: 'http://schema.org/BreadcrumbList',
21 | };
22 | schemasItem = {
23 | itemScope: true,
24 | itemProp: 'itemListElement',
25 | itemType: 'http://schema.org/ListItem',
26 | };
27 | }
28 | const numChildren = React.Children.count(children);
29 | const modifiedChildren = React.Children.map(children, (child, index) => {
30 | if (!child) {
31 | return null;
32 | }
33 | return React.cloneElement(
34 | child, ({
35 | ...schemasItem,
36 | schema,
37 | isLast: index === numChildren - 1,
38 | position: index + 1,
39 | })
40 | );
41 | });
42 | return (
43 |
52 | {modifiedChildren}
53 |
54 | );
55 | });
56 |
57 | Breadcrumb.displayName = 'Breadcrumb';
58 | Breadcrumb.defaultProps = defaultProps;
59 | Breadcrumb.propTypes = propTypes;
60 | Breadcrumb.Item = Item;
61 | export default Breadcrumb;
62 |
--------------------------------------------------------------------------------
/src/components/BubbleChat/Context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Context = React.createContext();
4 |
5 | export default Context;
6 |
--------------------------------------------------------------------------------
/src/components/BubbleChat/Image.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import classNames from 'classnames';
3 | import Context from './Context';
4 |
5 |
6 | const BubbleChatImage = React.forwardRef(({ className, ...props }, ref) => {
7 | const { type } = useContext(Context);
8 | return (
9 |
18 |
![]()
19 |
20 | );
21 | });
22 |
23 | BubbleChatImage.displayName = 'BubbleChat.Image';
24 | BubbleChatImage.defaultProps = {};
25 | BubbleChatImage.propTypes = {};
26 | export default BubbleChatImage;
27 |
--------------------------------------------------------------------------------
/src/components/Button/Group.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import Context from 'components/Form/Context';
5 |
6 | const propTypes = {
7 | /**
8 | * Sets the size for all Buttons in the group.
9 | * @default 'medium'
10 | * @type {('small'|'medium'|'large')}
11 | * */
12 | sizeControl: PropTypes.string,
13 | /** Sets the disabled state for all Buttons in the group. */
14 | disabledControl: PropTypes.bool,
15 | };
16 |
17 | const defaultProps = {
18 | disabledControl: false,
19 | };
20 |
21 | const Group = React.forwardRef(({ className, sizeControl, disabledControl, as: Component = 'div', ...props }, ref) => {
22 | const context = useMemo(() => ({ sizeControl, disabledControl }), [sizeControl, disabledControl]);
23 | return (
24 |
25 |
33 |
34 | );
35 | }
36 | );
37 | Group.displayName = 'ButtonGroup';
38 | Group.propTypes = propTypes;
39 | Group.defaultProps = defaultProps;
40 | export default Group;
41 |
--------------------------------------------------------------------------------
/src/components/Calender/Calendar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import CalendarBase from 'react-calendar/dist/entry.nostyle';
4 |
5 | const Calendar = React.forwardRef(({ className, ...props }, ref) => (
6 |
14 | ));
15 |
16 | Calendar.displayName = 'Calendar';
17 | Calendar.defaultProps = {};
18 | Calendar.propTypes = {};
19 |
20 | export default Calendar;
21 |
--------------------------------------------------------------------------------
/src/components/Calender/DatePicker.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import classNames from 'classnames';
3 | import PropTypes from 'prop-types';
4 | import DatePickerBase from 'react-date-picker/dist/entry.nostyle';
5 | import Context from 'components/Form/Context';
6 | import Icon from 'components/Icon';
7 | import DatePickerBaseV2 from './v2/DatePicker/DatePicker';
8 |
9 | const DatePicker = React.forwardRef(({ className, noClearIcon, size, version, calendarClassName, ...props }, ref) => {
10 | const { sizeControl } = useContext(Context);
11 | const sizeOri = size || sizeControl;
12 | const BaseClass = (version === 2) ? DatePickerBaseV2 : DatePickerBase;
13 | return (
14 |
}
24 | calendarIcon={
}
25 | calendarClassName={classNames(
26 | 'Calendar u-marginTopExtraSmall',
27 | calendarClassName && calendarClassName,
28 | )}
29 | />
30 | );
31 | });
32 |
33 | DatePicker.displayName = 'DatePicker';
34 | DatePicker.defaultProps = {
35 | noClearIcon: false,
36 | version: 1,
37 | };
38 | DatePicker.propTypes = {
39 | /**
40 | * Remove clear Icon
41 | */
42 | noClearIcon: PropTypes.bool,
43 | /**
44 | * DatePicker size variants
45 | *
46 | * Uses sizeControl from `
` if not explicitly specified.
47 | * @default 'medium'
48 | * */
49 | size: PropTypes.oneOf(['small', 'medium', 'large']),
50 | /**
51 | * DatePicker version:
52 | * - 1: default version, import from 'react-date-picker'
53 | * - 2: customized version
54 | *
55 | * @default 1
56 | * */
57 | version: PropTypes.oneOf([1, 2]),
58 | /**
59 | * Custom className for pop-up Calendar
60 | * */
61 | calendarClassName: PropTypes.string,
62 | };
63 |
64 | export default DatePicker;
65 |
--------------------------------------------------------------------------------
/src/components/Calender/DateRangePicker.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import DateRangePickerBase from '@wojtekmaj/react-daterange-picker/dist/entry.nostyle';
5 | import Icon from 'components/Icon';
6 | import Context from 'components/Form/Context';
7 |
8 | const DateRangePicker = React.forwardRef(({ className, noClearIcon, size, ...props }, ref) => {
9 | const { sizeControl } = useContext(Context);
10 | const sizeOri = size || sizeControl;
11 | return (
12 | }
22 | calendarIcon={}
23 | calendarClassName={classNames(
24 | 'Calendar u-marginTopExtraSmall'
25 | )}
26 | />
27 | );
28 | });
29 |
30 | DateRangePicker.displayName = 'DateRangePicker';
31 | DateRangePicker.defaultProps = {
32 | noClearIcon: false,
33 | };
34 | DateRangePicker.propTypes = {
35 | /**
36 | * Remove clear Icon
37 | */
38 | noClearIcon: PropTypes.bool,
39 | /**
40 | * DateRangePicker size variants
41 | *
42 | * Uses sizeControl from `` if not explicitly specified.
43 | * @default 'medium'
44 | * */
45 | size: PropTypes.oneOf(['small', 'medium', 'large']),
46 | };
47 |
48 | export default DateRangePicker;
49 |
--------------------------------------------------------------------------------
/src/components/Calender/TimePicker.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import TimePickerBase from 'react-time-picker/dist/entry.nostyle';
5 | import Icon from 'components/Icon';
6 | import Context from 'components/Form/Context';
7 |
8 | const TimePicker = React.forwardRef(({ className, noClearIcon, size, ...props }, ref) => {
9 | const { sizeControl } = useContext(Context);
10 | const sizeOri = size || sizeControl; return (
11 | }
21 | clockIcon={}
22 | calendarClassName={classNames(
23 | 'Calendar u-marginTopExtraSmall'
24 | )}
25 | />
26 | );
27 | });
28 |
29 | TimePicker.displayName = 'TimePicker';
30 | TimePicker.defaultProps = {
31 | noClearIcon: false,
32 | };
33 | TimePicker.propTypes = {
34 | /**
35 | * Remove clear Icon
36 | */
37 | noClearIcon: PropTypes.bool,
38 | /**
39 | * TimePicker size variants
40 | *
41 | * Uses sizeControl from `` if not explicitly specified.
42 | * @default 'medium'
43 | * */
44 | size: PropTypes.oneOf(['small', 'medium', 'large']),
45 | };
46 |
47 | export default TimePicker;
48 |
--------------------------------------------------------------------------------
/src/components/Calender/index.js:
--------------------------------------------------------------------------------
1 | export { default as Calendar } from './Calendar';
2 | export { default as DateRangePicker } from './DateRangePicker';
3 | export { default as DatePicker } from './DatePicker';
4 | export { default as TimePicker } from './TimePicker';
5 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/DateInput/DayInput.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | getYear,
5 | getMonthHuman,
6 | getDate,
7 | getDaysInMonth,
8 | } from '@wojtekmaj/date-utils';
9 |
10 | import Input from './Input';
11 |
12 | import { isMaxDate, isMinDate } from '../shared/propTypes';
13 | import { safeMin, safeMax } from '../shared/utils';
14 |
15 | export default function DayInput({
16 | maxDate,
17 | minDate,
18 | month,
19 | year,
20 | ...otherProps
21 | }) {
22 | const currentMonthMaxDays = (() => {
23 | if (!month) {
24 | return 31;
25 | }
26 |
27 | return getDaysInMonth(new Date(year, month - 1, 1));
28 | })();
29 |
30 | function isSameMonth(date) {
31 | return date && year === getYear(date) && month === getMonthHuman(date);
32 | }
33 |
34 | const maxDay = safeMin(currentMonthMaxDays, isSameMonth(maxDate) && getDate(maxDate));
35 | const minDay = safeMax(1, isSameMonth(minDate) && getDate(minDate));
36 |
37 | return (
38 |
44 | );
45 | }
46 |
47 | const isNumberOrString = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
48 |
49 | DayInput.propTypes = {
50 | ariaLabel: PropTypes.string,
51 | className: PropTypes.string.isRequired,
52 | disabled: PropTypes.bool,
53 | itemRef: PropTypes.func,
54 | maxDate: isMaxDate,
55 | minDate: isMinDate,
56 | month: isNumberOrString,
57 | onChange: PropTypes.func,
58 | onKeyDown: PropTypes.func,
59 | onKeyUp: PropTypes.func,
60 | placeholder: PropTypes.string,
61 | required: PropTypes.bool,
62 | showLeadingZeros: PropTypes.bool,
63 | value: isNumberOrString,
64 | year: isNumberOrString,
65 | };
66 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/DateInput/Input.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import mergeClassNames from 'merge-class-names';
4 | import updateInputWidth, { getFontShorthand } from 'update-input-width';
5 | import predictInputValue from '@wojtekmaj/predict-input-value';
6 |
7 | /* eslint-disable jsx-a11y/no-autofocus */
8 |
9 | function onFocus(event) {
10 | const { target } = event;
11 |
12 | requestAnimationFrame(() => target.select());
13 | }
14 |
15 | function updateInputWidthOnFontLoad(element) {
16 | if (!document.fonts) {
17 | return;
18 | }
19 |
20 | const font = getFontShorthand(element);
21 |
22 | if (!font) {
23 | return;
24 | }
25 |
26 | const isFontLoaded = document.fonts.check(font);
27 |
28 | if (isFontLoaded) {
29 | return;
30 | }
31 |
32 | function onLoadingDone() {
33 | updateInputWidth(element);
34 | }
35 |
36 | document.fonts.addEventListener('loadingdone', onLoadingDone);
37 | }
38 |
39 | function makeOnKeyPress(max) {
40 | return function onKeyPress(event) {
41 | const { key } = event;
42 |
43 | const isNumberKey = !isNaN(parseInt(key, 10));
44 | const nextValue = predictInputValue(event);
45 |
46 | if (isNumberKey && (nextValue <= max)) {
47 | return;
48 | }
49 |
50 | event.preventDefault();
51 | };
52 | }
53 |
54 | export default function Input({
55 | ariaLabel,
56 | autoFocus,
57 | className,
58 | disabled,
59 | itemRef,
60 | max,
61 | min,
62 | name,
63 | nameForClass,
64 | onChange,
65 | onKeyDown,
66 | onKeyUp,
67 | placeholder = '--',
68 | required,
69 | showLeadingZeros,
70 | step,
71 | value,
72 | }) {
73 | const hasLeadingZero = showLeadingZeros && value !== null && value < 10;
74 |
75 | return [
76 | (hasLeadingZero && 0),
77 | {
98 | updateInputWidth(event.target);
99 |
100 | if (onKeyUp) {
101 | onKeyUp(event);
102 | }
103 | }}
104 | placeholder={placeholder}
105 | ref={(ref) => {
106 | if (ref) {
107 | updateInputWidth(ref);
108 | updateInputWidthOnFontLoad(ref);
109 | }
110 |
111 | if (itemRef) {
112 | itemRef(ref, name);
113 | }
114 | }}
115 | required={required}
116 | step={step}
117 | type="text"
118 | value={value !== null ? value : ''}
119 | />,
120 | ];
121 | }
122 |
123 | Input.propTypes = {
124 | ariaLabel: PropTypes.string,
125 | className: PropTypes.string.isRequired,
126 | disabled: PropTypes.bool,
127 | itemRef: PropTypes.func,
128 | max: PropTypes.number,
129 | min: PropTypes.number,
130 | onChange: PropTypes.func,
131 | onKeyDown: PropTypes.func,
132 | onKeyUp: PropTypes.func,
133 | required: PropTypes.bool,
134 | showLeadingZeros: PropTypes.bool,
135 | step: PropTypes.number,
136 | value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
137 | };
138 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/DateInput/MonthInput.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { getYear, getMonthHuman } from '@wojtekmaj/date-utils';
4 |
5 | import Input from './Input';
6 |
7 | import { isMaxDate, isMinDate } from '../shared/propTypes';
8 | import { safeMin, safeMax } from '../shared/utils';
9 |
10 | export default function MonthInput({
11 | maxDate,
12 | minDate,
13 | year,
14 | ...otherProps
15 | }) {
16 | function isSameYear(date) {
17 | return date && year === getYear(date);
18 | }
19 |
20 | const maxMonth = safeMin(12, isSameYear(maxDate) && getMonthHuman(maxDate));
21 | const minMonth = safeMax(1, isSameYear(minDate) && getMonthHuman(minDate));
22 |
23 | return (
24 |
30 | );
31 | }
32 |
33 | const isNumberOrString = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
34 |
35 | MonthInput.propTypes = {
36 | ariaLabel: PropTypes.string,
37 | className: PropTypes.string.isRequired,
38 | disabled: PropTypes.bool,
39 | itemRef: PropTypes.func,
40 | maxDate: isMaxDate,
41 | minDate: isMinDate,
42 | onChange: PropTypes.func,
43 | onKeyDown: PropTypes.func,
44 | onKeyUp: PropTypes.func,
45 | placeholder: PropTypes.string,
46 | required: PropTypes.bool,
47 | showLeadingZeros: PropTypes.bool,
48 | value: isNumberOrString,
49 | year: isNumberOrString,
50 | };
51 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/DateInput/MonthSelect.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import mergeClassNames from 'merge-class-names';
4 | import { getYear, getMonthHuman } from '@wojtekmaj/date-utils';
5 |
6 | import { formatMonth, formatShortMonth } from '../shared/dateFormatter';
7 | import { isMaxDate, isMinDate } from '../shared/propTypes';
8 | import { safeMin, safeMax } from '../shared/utils';
9 |
10 | export default function MonthSelect({
11 | ariaLabel,
12 | className,
13 | itemRef,
14 | locale,
15 | maxDate,
16 | minDate,
17 | placeholder = '--',
18 | short,
19 | value,
20 | year,
21 | ...otherProps
22 | }) {
23 | function isSameYear(date) {
24 | return date && year === getYear(date);
25 | }
26 |
27 | const maxMonth = safeMin(12, isSameYear(maxDate) && getMonthHuman(maxDate));
28 | const minMonth = safeMax(1, isSameYear(minDate) && getMonthHuman(minDate));
29 | const dates = [...Array(12)].map((el, index) => new Date(2019, index, 1));
30 | const name = 'month';
31 | const formatter = short ? formatShortMonth : formatMonth;
32 |
33 | return (
34 |
69 | );
70 | }
71 |
72 | const isNumberOrString = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
73 |
74 | MonthSelect.propTypes = {
75 | ariaLabel: PropTypes.string,
76 | className: PropTypes.string.isRequired,
77 | disabled: PropTypes.bool,
78 | itemRef: PropTypes.func,
79 | locale: PropTypes.string,
80 | maxDate: isMaxDate,
81 | minDate: isMinDate,
82 | onChange: PropTypes.func,
83 | onKeyDown: PropTypes.func,
84 | onKeyUp: PropTypes.func,
85 | placeholder: PropTypes.string,
86 | required: PropTypes.bool,
87 | short: PropTypes.bool,
88 | value: isNumberOrString,
89 | year: isNumberOrString,
90 | };
91 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/DateInput/NativeInput.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | getYear,
5 | getISOLocalDate,
6 | getISOLocalMonth,
7 | } from '@wojtekmaj/date-utils';
8 |
9 | import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes';
10 |
11 | export default function NativeInput({
12 | ariaLabel,
13 | disabled,
14 | maxDate,
15 | minDate,
16 | name,
17 | onChange,
18 | required,
19 | value,
20 | valueType,
21 | }) {
22 | const nativeInputType = (() => {
23 | switch (valueType) {
24 | case 'decade':
25 | case 'year':
26 | return 'number';
27 | case 'month':
28 | return 'month';
29 | case 'day':
30 | return 'date';
31 | default:
32 | throw new Error('Invalid valueType.');
33 | }
34 | })();
35 |
36 | const nativeValueParser = (() => {
37 | switch (valueType) {
38 | case 'century':
39 | case 'decade':
40 | case 'year':
41 | return getYear;
42 | case 'month':
43 | return getISOLocalMonth;
44 | case 'day':
45 | return getISOLocalDate;
46 | default:
47 | throw new Error('Invalid valueType.');
48 | }
49 | })();
50 |
51 | function stopPropagation(event) {
52 | event.stopPropagation();
53 | }
54 |
55 | return (
56 |
74 | );
75 | }
76 |
77 | NativeInput.propTypes = {
78 | ariaLabel: PropTypes.string,
79 | disabled: PropTypes.bool,
80 | maxDate: isMaxDate,
81 | minDate: isMinDate,
82 | name: PropTypes.string,
83 | onChange: PropTypes.func,
84 | required: PropTypes.bool,
85 | value: PropTypes.oneOfType([
86 | PropTypes.string,
87 | PropTypes.instanceOf(Date),
88 | ]),
89 | valueType: isValueType,
90 | };
91 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/DateInput/YearInput.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { getYear } from '@wojtekmaj/date-utils';
4 |
5 | import Input from './Input';
6 |
7 | import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes';
8 | import { safeMax, safeMin } from '../shared/utils';
9 |
10 | export default function YearInput({
11 | maxDate,
12 | minDate,
13 | placeholder = '----',
14 | valueType,
15 | ...otherProps
16 | }) {
17 | const maxYear = safeMin(275760, maxDate && getYear(maxDate));
18 | const minYear = safeMax(1, minDate && getYear(minDate));
19 |
20 | const yearStep = (() => {
21 | if (valueType === 'century') {
22 | return 10;
23 | }
24 |
25 | return 1;
26 | })();
27 |
28 | return (
29 |
37 | );
38 | }
39 |
40 | const isNumberOrString = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
41 |
42 | YearInput.propTypes = {
43 | ariaLabel: PropTypes.string,
44 | className: PropTypes.string.isRequired,
45 | disabled: PropTypes.bool,
46 | itemRef: PropTypes.func,
47 | maxDate: isMaxDate,
48 | minDate: isMinDate,
49 | onChange: PropTypes.func,
50 | onKeyDown: PropTypes.func,
51 | onKeyUp: PropTypes.func,
52 | placeholder: PropTypes.string,
53 | required: PropTypes.bool,
54 | value: isNumberOrString,
55 | valueType: isValueType,
56 | };
57 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/Divider.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default function Divider({ children }) {
5 | return (
6 |
7 | {children}
8 |
9 | );
10 | }
11 |
12 | Divider.propTypes = {
13 | children: PropTypes.node,
14 | };
15 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/shared/dateFormatter.js:
--------------------------------------------------------------------------------
1 | import getUserLocale from 'get-user-locale';
2 |
3 | export function getFormatter(options) {
4 | return (locale, date) => date.toLocaleString(locale || getUserLocale(), options);
5 | }
6 |
7 | /**
8 | * Changes the hour in a Date to ensure right date formatting even if DST is messed up.
9 | * Workaround for bug in WebKit and Firefox with historical dates.
10 | * For more details, see:
11 | * https://bugs.chromium.org/p/chromium/issues/detail?id=750465
12 | * https://bugzilla.mozilla.org/show_bug.cgi?id=1385643
13 | *
14 | * @param {Date} date Date.
15 | */
16 | function toSafeHour(date) {
17 | const safeDate = new Date(date);
18 | return new Date(safeDate.setHours(12));
19 | }
20 |
21 | function getSafeFormatter(options) {
22 | return (locale, date) => getFormatter(options)(locale, toSafeHour(date));
23 | }
24 |
25 | const formatMonthOptions = { month: 'long' };
26 | const formatShortMonthOptions = { month: 'short' };
27 |
28 | export const formatMonth = getSafeFormatter(formatMonthOptions);
29 | export const formatShortMonth = getSafeFormatter(formatShortMonthOptions);
30 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/shared/dates.js:
--------------------------------------------------------------------------------
1 | import {
2 | getCenturyStart,
3 | getCenturyEnd,
4 |
5 | getDecadeStart,
6 | getDecadeEnd,
7 |
8 | getYearStart,
9 | getYearEnd,
10 |
11 | getMonthStart,
12 | getMonthEnd,
13 |
14 | getDayStart,
15 | getDayEnd,
16 | } from '@wojtekmaj/date-utils';
17 |
18 | /**
19 | * Returns the beginning of a given range.
20 | *
21 | * @param {String} rangeType Range type (e.g. 'day')
22 | * @param {Date} date Date.
23 | */
24 | export function getBegin(rangeType, date) {
25 | switch (rangeType) {
26 | case 'century': return getCenturyStart(date);
27 | case 'decade': return getDecadeStart(date);
28 | case 'year': return getYearStart(date);
29 | case 'month': return getMonthStart(date);
30 | case 'day': return getDayStart(date);
31 | default: throw new Error(`Invalid rangeType: ${rangeType}`);
32 | }
33 | }
34 |
35 | /**
36 | * Returns the end of a given range.
37 | *
38 | * @param {String} rangeType Range type (e.g. 'day')
39 | * @param {Date} date Date.
40 | */
41 | export function getEnd(rangeType, date) {
42 | switch (rangeType) {
43 | case 'century': return getCenturyEnd(date);
44 | case 'decade': return getDecadeEnd(date);
45 | case 'year': return getYearEnd(date);
46 | case 'month': return getMonthEnd(date);
47 | case 'day': return getDayEnd(date);
48 | default: throw new Error(`Invalid rangeType: ${rangeType}`);
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/shared/dates.spec.js:
--------------------------------------------------------------------------------
1 | import {
2 | getBegin,
3 | getEnd,
4 | } from './dates';
5 |
6 | describe('getBegin', () => {
7 | it('returns proper beginning of the century', () => {
8 | const date = new Date(2017, 0, 1);
9 | const beginOfCenturyDate = new Date(2001, 0, 1);
10 |
11 | const beginOfCentury = getBegin('century', date);
12 |
13 | expect(beginOfCentury).toEqual(beginOfCenturyDate);
14 | });
15 |
16 | it('returns proper beginning of the decade', () => {
17 | const date = new Date(2017, 0, 1);
18 | const beginOfDecadeDate = new Date(2011, 0, 1);
19 |
20 | const beginOfDecade = getBegin('decade', date);
21 |
22 | expect(beginOfDecade).toEqual(beginOfDecadeDate);
23 | });
24 |
25 | it('returns proper beginning of the year', () => {
26 | const date = new Date(2017, 0, 1);
27 | const beginOfYearDate = new Date(2017, 0, 1);
28 |
29 | const beginOfYear = getBegin('year', date);
30 |
31 | expect(beginOfYear).toEqual(beginOfYearDate);
32 | });
33 |
34 | it('returns proper beginning of the month', () => {
35 | const date = new Date(2017, 0, 1);
36 | const beginOfMonthDate = new Date(2017, 0, 1);
37 |
38 | const monthRange = getBegin('month', date);
39 |
40 | expect(monthRange).toEqual(beginOfMonthDate);
41 | });
42 |
43 | it('returns proper beginning of the day', () => {
44 | const date = new Date(2017, 0, 1);
45 | const beginOfDayDate = new Date(2017, 0, 1);
46 |
47 | const beginOfDay = getBegin('day', date);
48 |
49 | expect(beginOfDay).toEqual(beginOfDayDate);
50 | });
51 |
52 | it('throws an error when given unrecognized range type', () => {
53 | const date = new Date(2017, 0, 1);
54 |
55 | expect(() => getBegin('hamster', date)).toThrow();
56 | });
57 | });
58 |
59 | describe('getEnd', () => {
60 | it('returns proper end of the century', () => {
61 | const date = new Date(2017, 0, 1);
62 | const endOfCenturyDate = new Date(2100, 11, 31, 23, 59, 59, 999);
63 |
64 | const endOfCentury = getEnd('century', date);
65 |
66 | expect(endOfCentury).toEqual(endOfCenturyDate);
67 | });
68 |
69 | it('returns proper end of the decade', () => {
70 | const date = new Date(2017, 0, 1);
71 | const endOfDecadeDate = new Date(2020, 11, 31, 23, 59, 59, 999);
72 |
73 | const endOfDecade = getEnd('decade', date);
74 |
75 | expect(endOfDecade).toEqual(endOfDecadeDate);
76 | });
77 |
78 | it('returns proper end of the year', () => {
79 | const date = new Date(2017, 0, 1);
80 | const endOfYearDate = new Date(2017, 11, 31, 23, 59, 59, 999);
81 |
82 | const endOfYear = getEnd('year', date);
83 |
84 | expect(endOfYear).toEqual(endOfYearDate);
85 | });
86 |
87 | it('returns proper end of the month', () => {
88 | const date = new Date(2017, 0, 1);
89 | const endOfMonthDate = new Date(2017, 0, 31, 23, 59, 59, 999);
90 |
91 | const monthRange = getEnd('month', date);
92 |
93 | expect(monthRange).toEqual(endOfMonthDate);
94 | });
95 |
96 | it('returns proper end of the day', () => {
97 | const date = new Date(2017, 0, 1);
98 | const endOfDayDate = new Date(2017, 0, 1, 23, 59, 59, 999);
99 |
100 | const endOfDay = getEnd('day', date);
101 |
102 | expect(endOfDay).toEqual(endOfDayDate);
103 | });
104 |
105 | it('throws an error when given unrecognized range type', () => {
106 | const date = new Date(2017, 0, 1);
107 |
108 | expect(() => getEnd('hamster', date)).toThrow();
109 | });
110 | });
111 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/shared/propTypes.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | const allViews = ['century', 'decade', 'year', 'month'];
4 | const allValueTypes = [...allViews.slice(1), 'day'];
5 |
6 | export const isValueType = PropTypes.oneOf(allValueTypes);
7 |
8 | export const isMinDate = (props, propName, componentName) => {
9 | const { [propName]: minDate } = props;
10 |
11 | if (!minDate) {
12 | return null;
13 | }
14 |
15 | if (!(minDate instanceof Date)) {
16 | return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
17 | }
18 |
19 | const { maxDate } = props;
20 |
21 | if (maxDate && minDate > maxDate) {
22 | return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
23 | }
24 |
25 | return null;
26 | };
27 |
28 | export const isMaxDate = (props, propName, componentName) => {
29 | const { [propName]: maxDate } = props;
30 |
31 | if (!maxDate) {
32 | return null;
33 | }
34 |
35 | if (!(maxDate instanceof Date)) {
36 | return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
37 | }
38 |
39 | const { minDate } = props;
40 |
41 | if (minDate && maxDate < minDate) {
42 | return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`);
43 | }
44 |
45 | return null;
46 | };
47 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/shared/utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Calls a function, if it's defined, with specified arguments
3 | * @param {Function} fn
4 | * @param {Object} args
5 | */
6 | export function callIfDefined(fn, ...args) {
7 | if (fn && typeof fn === 'function') {
8 | fn(...args);
9 | }
10 | }
11 |
12 | function isValidNumber(num) {
13 | return num !== null && num !== false && !Number.isNaN(Number(num));
14 | }
15 |
16 | export function safeMin(...args) {
17 | return Math.min(...args.filter(isValidNumber));
18 | }
19 |
20 | export function safeMax(...args) {
21 | return Math.max(...args.filter(isValidNumber));
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Calender/v2/DatePicker/shared/utils.spec.js:
--------------------------------------------------------------------------------
1 | import {
2 | callIfDefined,
3 | safeMin,
4 | safeMax,
5 | } from './utils';
6 |
7 | describe('callIfDefined', () => {
8 | it('calls given function if defined', () => {
9 | const fn = jest.fn();
10 | const arg1 = 'hi';
11 | const arg2 = 'hello';
12 |
13 | callIfDefined(fn, arg1, arg2);
14 |
15 | expect(fn).toHaveBeenCalledWith(arg1, arg2);
16 | });
17 | });
18 |
19 | describe('safeMin', () => {
20 | it('returns Infinity given no values', () => {
21 | const result = safeMin();
22 |
23 | expect(result).toBe(Infinity);
24 | });
25 |
26 | it('returns the smallest value given valid numbers', () => {
27 | const result = safeMin(3, 4, 5);
28 |
29 | expect(result).toBe(3);
30 | });
31 |
32 | it('returns the smallest value given valid numbers with zero', () => {
33 | const result = safeMin(0, 1, 2);
34 |
35 | expect(result).toBe(0);
36 | });
37 |
38 | it('returns the smallest value given valid number and null', () => {
39 | const result = safeMin(1, 2, null);
40 |
41 | expect(result).toBe(1);
42 | });
43 |
44 | it('returns the smallest value given valid number and undefined', () => {
45 | const result = safeMin(1, 2, undefined);
46 |
47 | expect(result).toBe(1);
48 | });
49 |
50 | it('returns the smallest value given valid numbers as strings', () => {
51 | const result = safeMin('1', '2');
52 |
53 | expect(result).toBe(1);
54 | });
55 | });
56 |
57 | describe('safeMax', () => {
58 | it('returns -Infinity given no values', () => {
59 | const result = safeMax();
60 |
61 | expect(result).toBe(-Infinity);
62 | });
63 |
64 | it('returns the largest value given valid numbers', () => {
65 | const result = safeMax(3, 4, 5);
66 |
67 | expect(result).toBe(5);
68 | });
69 |
70 | it('returns the largest value given valid numbers with zero', () => {
71 | const result = safeMax(-2, -1, 0);
72 |
73 | expect(result).toBe(0);
74 | });
75 |
76 | it('returns the largest value given valid number and null', () => {
77 | const result = safeMax(3, 4, null);
78 |
79 | expect(result).toBe(4);
80 | });
81 |
82 | it('returns the largest value given valid number and undefined', () => {
83 | const result = safeMax(3, 4, undefined);
84 |
85 | expect(result).toBe(4);
86 | });
87 |
88 | it('returns the largest value given valid numbers as strings', () => {
89 | const result = safeMax('3', '4');
90 |
91 | expect(result).toBe(4);
92 | });
93 | });
94 |
--------------------------------------------------------------------------------
/src/components/Card/index.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 |
5 | const Context = React.createContext();
6 | const propTypes = {
7 | /**
8 | * When this prop is set, it creates a Card with a Card.Body inside
9 | * passing the children directly to it
10 | */
11 | body: PropTypes.bool,
12 | /**
13 | * Card size variants
14 | * */
15 | size: PropTypes.oneOf(['small', 'medium', 'large']),
16 | };
17 |
18 | const defaultProps = {
19 | body: false,
20 | size: 'medium',
21 | };
22 |
23 | const sizesClassName = {
24 | small: {
25 | content: 'u-paddingExtraSmall',
26 | title: 'u-text300',
27 | },
28 | medium: {
29 | content: 'u-paddingSmall',
30 | title: 'u-text400',
31 | },
32 | large: {
33 | content: 'u-paddingMedium',
34 | title: 'u-text600',
35 | },
36 | };
37 |
38 | const Card = React.forwardRef(({ className, body, size, children, as: Component = 'div', ...props }, ref) => {
39 | const context = useMemo(() => ({ size }), [size]);
40 | return (
41 |
42 |
51 | {body ? {children} : children}
52 |
53 |
54 | );
55 | });
56 |
57 | const CardBody = React.forwardRef(({ className, as: Component = 'div', ...props }, ref) => {
58 | const { size } = useContext(Context);
59 | return (
60 |
69 | );
70 | });
71 | const CardHeader = React.forwardRef(({ className, as: Component = 'div', ...props }, ref) => {
72 | const { size } = useContext(Context);
73 | return (
74 |
83 | );
84 | });
85 | const CardTitle = React.forwardRef(({ className, as: Component = 'div', ...props }, ref) => {
86 | const { size } = useContext(Context);
87 | return (
88 |
97 | );
98 | });
99 |
100 |
101 | Card.displayName = 'Card';
102 | Card.propTypes = propTypes;
103 | Card.defaultProps = defaultProps;
104 | Card.Header = CardHeader;
105 | Card.Title = CardTitle;
106 | Card.Body = CardBody;
107 | export default Card;
108 |
--------------------------------------------------------------------------------
/src/components/Carousel/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import SlickBase from 'react-slick';
5 | import createBlock from 'utils/createBlock';
6 |
7 | const propTypes = {
8 | /**
9 | * The indicator inside content
10 | */
11 | dotInside: PropTypes.bool,
12 | /** [Define settings](https://react-slick.neostack.com/docs/api) */
13 | settings: PropTypes.object,
14 | };
15 |
16 | const defaultProps = {
17 | dotInside: false,
18 | settings: {
19 | infinite: true,
20 | dots: true,
21 | },
22 | };
23 |
24 | const Carousel = React.forwardRef(({ className, dotInside, settings, ...props }, ref) => (
25 |
35 | ));
36 |
37 | const Item = createBlock('Carousel-item u-lineHeightReset');
38 |
39 | Carousel.displayName = 'Carousel';
40 | Carousel.defaultProps = defaultProps;
41 | Carousel.propTypes = propTypes;
42 | Carousel.Item = Item;
43 | export default Carousel;
44 |
--------------------------------------------------------------------------------
/src/components/ChatBox/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import createBlock from 'utils/createBlock';
4 |
5 | const propTypes = {
6 |
7 | };
8 | const defaultProps = {
9 |
10 | };
11 |
12 | const ChatBox = React.forwardRef(({ className, ...props }, ref) => (
13 |
22 | ));
23 |
24 | const List = React.forwardRef(({ className, children, innerClassName, ...props }, ref) => (
25 |
33 |
39 | {children}
40 |
41 |
54 |
55 | {children}
56 |
57 |
![]()
` element */
12 | src: PropTypes.string,
13 | /** Providing a alt if `src` exits */
14 | alt: PropTypes.string,
15 | /** Set the width of the logo */
16 | width: PropTypes.number,
17 | /** Set the height of the logo */
18 | height: PropTypes.number,
19 | };
20 | const defaultProps = {
21 | width: 240,
22 | alt: 'EmptyState',
23 | };
24 | const EmptyState = React.forwardRef(({ className, children, name, src, fileType, alt, height, width, as: Component = 'div', ...props }, ref) => {
25 | let nameOri = name;
26 | let srcOri = src;
27 | if (srcOri) {
28 | nameOri = false;
29 | } else if (nameOri) {
30 | srcOri = Plugins
31 | .getPlugins(PluginType.ASSET)
32 | .traverseCall('getAsset', 'emptyState', nameOri)
33 | .find(asset => !!asset);
34 | }
35 | return (
36 |
45 | {srcOri && (
46 |
47 | )}
48 | {children}
49 |
50 | );
51 | });
52 |
53 | const Heading = createBlock('EmptyState-heading u-marginTopSmall u-text600 u-fontMedium u-textLight');
54 | const Description = createBlock('EmptyState-description u-marginBottomSmall u-textLight');
55 |
56 | EmptyState.Heading = Heading;
57 | EmptyState.Description = Description;
58 | EmptyState.displayName = 'EmptyState';
59 | EmptyState.defaultProps = defaultProps;
60 | EmptyState.propTypes = propTypes;
61 | export default EmptyState;
62 |
--------------------------------------------------------------------------------
/src/components/Fade/index.js:
--------------------------------------------------------------------------------
1 | //fork react-bootstrap/src/Fade.js
2 | import classNames from 'classnames';
3 | import React, { useCallback } from 'react';
4 | import PropTypes from 'prop-types';
5 | import Transition, {
6 | ENTERED,
7 | ENTERING,
8 | } from 'react-transition-group/Transition';
9 | import triggerBrowserReflow from 'utils/triggerBrowserReflow';
10 |
11 | const propTypes = {
12 | /**
13 | * Show the component; triggers the fade in or fade out animation
14 | */
15 | in: PropTypes.bool,
16 |
17 | /**
18 | * Wait until the first "enter" transition to mount the component (add it to the DOM)
19 | */
20 | mountOnEnter: PropTypes.bool,
21 |
22 | /**
23 | * Unmount the component (remove it from the DOM) when it is faded out
24 | */
25 | unmountOnExit: PropTypes.bool,
26 |
27 | /**
28 | * Run the fade in animation when the component mounts, if it is initially
29 | * shown
30 | */
31 | appear: PropTypes.bool,
32 |
33 | /**
34 | * Duration of the fade animation in milliseconds, to ensure that finishing
35 | * callbacks are fired even if the original browser transition end events are
36 | * canceled
37 | */
38 | timeout: PropTypes.number,
39 |
40 | /**
41 | * Callback fired before the component fades in
42 | */
43 | onEnter: PropTypes.func,
44 | /**
45 | * Callback fired after the component starts to fade in
46 | */
47 | onEntering: PropTypes.func,
48 | /**
49 | * Callback fired after the has component faded in
50 | */
51 | onEntered: PropTypes.func,
52 | /**
53 | * Callback fired before the component fades out
54 | */
55 | onExit: PropTypes.func,
56 | /**
57 | * Callback fired after the component starts to fade out
58 | */
59 | onExiting: PropTypes.func,
60 | /**
61 | * Callback fired after the component has faded out
62 | */
63 | onExited: PropTypes.func,
64 | };
65 |
66 | const defaultProps = {
67 | in: false,
68 | timeout: 300,
69 | mountOnEnter: false,
70 | unmountOnExit: false,
71 | appear: false,
72 | };
73 |
74 | const fadeStyles = {
75 | [ENTERING]: 'Show js-entering',
76 | [ENTERED]: 'Show js-entered',
77 | };
78 |
79 | const Fade = React.forwardRef(({ className, children, ...props }, ref) => {
80 | const handleEnter = useCallback(
81 | (node) => {
82 | triggerBrowserReflow(node);
83 | if (props.onEnter) props.onEnter(node);
84 | },
85 | [props],
86 | );
87 |
88 | return (
89 |
95 | {(status, innerProps) => React.cloneElement(children, {
96 | ...innerProps,
97 | className: classNames(
98 | 'Fade',
99 | className,
100 | children.props.className,
101 | fadeStyles[status],
102 | ),
103 | })
104 | }
105 |
106 | );
107 | });
108 |
109 | Fade.propTypes = propTypes;
110 | Fade.defaultProps = defaultProps;
111 | Fade.displayName = 'Fade';
112 |
113 | export default Fade;
114 |
--------------------------------------------------------------------------------
/src/components/Form/Check.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import warning from 'warning';
5 | import Context from './Context';
6 |
7 | const propTypes = {
8 | /**
9 | * The type of checkable.
10 | * @type {('radio' | 'checkbox' | 'checkbox_button')}
11 | */
12 | type: PropTypes.oneOf(['radio', 'checkbox', 'checkbox_button']).isRequired,
13 | /** A HTML id attribute, necessary for proper form accessibility. */
14 | id: PropTypes.string.isRequired,
15 | /** Custom label */
16 | label: PropTypes.oneOfType([
17 | PropTypes.string,
18 | PropTypes.func,
19 | ]),
20 | /**
21 | * Render inline ``
22 | * @default false
23 | * */
24 | inline: PropTypes.bool,
25 | /**
26 | * Add "valid" validation styles to the control
27 | * @default false
28 | * */
29 | isValid: PropTypes.bool,
30 | /**
31 | * Add "invalid" validation styles to the control and accompanying label
32 | * @default false
33 | * */
34 | isInvalid: PropTypes.bool,
35 | /**
36 | * The underlying HTML element to use when rendering the Form.Check.
37 | * @default input
38 | */
39 | /**
40 | * Input size variants
41 | * @default 'medium'
42 | * */
43 | sizeInput: PropTypes.oneOf([
44 | 'small',
45 | 'medium',
46 | 'large',
47 | ]),
48 | as: PropTypes.elementType,
49 | };
50 |
51 | const defaultProps = {
52 | // eslint-disable-next-line react/default-props-match-prop-types
53 | type: 'checkbox',
54 | };
55 |
56 | const Check = React.forwardRef(({ className, sizeInput, type, id, label, inline, isValid, isInvalid, disabled, as: Component = 'div', ...props }, ref) => {
57 | const { controlId, disabledControl, sizeControl } = useContext(Context);
58 |
59 | warning(
60 | controlId == null || !id,
61 | '`controlId` is ignored on `` when `id` is specified.',
62 | );
63 | const disabledOri = disabled || disabledControl;
64 | const sizeInputSet = sizeInput || sizeControl;
65 | const idSet = id || controlId;
66 | return (
67 |
82 |
90 |
103 |
104 | );
105 | });
106 |
107 | Check.displayName = 'FormCheck';
108 | Check.defaultProps = defaultProps;
109 | Check.propTypes = propTypes;
110 | export default Check;
111 |
--------------------------------------------------------------------------------
/src/components/Form/Context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Context = React.createContext(
4 | {
5 | controlId: undefined,
6 | sizeControl: undefined,
7 | requiredControl: undefined,
8 | disabledControl: undefined,
9 | });
10 |
11 | export default Context;
12 |
--------------------------------------------------------------------------------
/src/components/Form/Feedback.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 |
5 | const propTypes = {
6 | /** Specify whether the feedback is for valid or invalid fields */
7 | type: PropTypes.oneOf(['valid', 'invalid']),
8 | /**
9 | * Set Form.Feedback visible
10 | */
11 | visible: PropTypes.bool,
12 | /**
13 | * You can use a custom element type for this component.
14 | * @default div
15 | * */
16 | as: PropTypes.elementType,
17 | };
18 |
19 | const defaultProps = {
20 | type: 'valid',
21 | visible: false,
22 | };
23 |
24 | const Feedback = React.forwardRef(({ className, type, visible, as: Component = 'div', ...props }, ref) => (
25 |
35 | ));
36 | Feedback.displayName = 'FormFeedback';
37 | Feedback.propTypes = propTypes;
38 | Feedback.defaultProps = defaultProps;
39 |
40 | export default Feedback;
41 |
--------------------------------------------------------------------------------
/src/components/Form/File.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import warning from 'warning';
5 | import Context from './Context';
6 |
7 | const propTypes = {
8 | /**
9 | * The underlying HTML element to use when rendering the Form.File.
10 | * @default div
11 | * */
12 | as: PropTypes.elementType,
13 | /** Uses controlId from `` if not explicitly specified. */
14 | id: PropTypes.string,
15 | /**
16 | * Uses sizeControl from `` if not explicitly specified.
17 | * @default 'medium'
18 | * */
19 | sizeInput: PropTypes.oneOf([
20 | 'small',
21 | 'medium',
22 | 'large',
23 | ]),
24 | /** File name */
25 | fileName: PropTypes.string,
26 | /** Custom browse button text */
27 | browseText: PropTypes.string,
28 | /**
29 | * Add "invalid" validation styles to the control and accompanying label
30 | * @default false
31 | * */
32 | isValid: PropTypes.bool,
33 | /**
34 | * Add "valid" validation styles to the control
35 | * @default false
36 | * */
37 | isInvalid: PropTypes.bool,
38 | /** Remove border all state */
39 | isBorderNone: PropTypes.bool,
40 | /** Reset background to transparent*/
41 | isBackgroundReset: PropTypes.bool,
42 | /** The underlying HTML element to use when rendering the Form.Input. */
43 | placeholder: PropTypes.string,
44 | };
45 |
46 | const defaultProps = {
47 | browseText: 'Browse',
48 | placeholder: '',
49 | };
50 |
51 | const File = React.forwardRef(({ className, sizeInput, id, fileName, placeholder, browseText, isValid, isInvalid, isBorderNone, isBackgroundReset, as: Component = 'div', ...props }, ref) => {
52 | const { sizeControl, controlId } = useContext(Context);
53 | const sizeInputSet = sizeInput || sizeControl;
54 | const idSet = id || controlId;
55 |
56 | warning(
57 | controlId == null || !id,
58 | '`controlId` is ignored on `` when `id` is specified.',
59 | );
60 | return (
61 |
76 |
83 |
96 |
97 |
98 | );
99 | });
100 |
101 | File.displayName = 'FormFile';
102 | File.defaultProps = defaultProps;
103 | File.propTypes = propTypes;
104 | export default File;
105 |
--------------------------------------------------------------------------------
/src/components/Form/Group.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import Context from './Context';
5 |
6 | const propTypes = {
7 | /** Sets id on `` and htmlFor on ``. */
8 | controlId: PropTypes.string,
9 | /**
10 | * Sets sizeInput on `` and sizeLabel on ``.
11 | * @default 'medium'
12 | * @type {('small'|'medium'|'large')}
13 | * */
14 | sizeControl: PropTypes.string,
15 | /**
16 | * Sets required on ``.
17 | * @default false
18 | * */
19 | requiredControl: PropTypes.bool,
20 | /**
21 | * You can use a custom element type for this component.
22 | * @default div
23 | * */
24 | as: PropTypes.elementType,
25 | };
26 |
27 | const defaultProps = {
28 | };
29 |
30 | const Group = React.forwardRef(({ className, controlId, sizeControl, disabledControl, requiredControl, as: Component = 'div', ...props }, ref) => {
31 | const context = useMemo(() => ({ controlId, sizeControl, requiredControl, disabledControl }), [controlId, sizeControl, requiredControl, disabledControl]);
32 | return (
33 |
34 |
43 |
44 | );
45 | }
46 | );
47 | Group.displayName = 'FormGroup';
48 | Group.propTypes = propTypes;
49 | Group.defaultProps = defaultProps;
50 | export default Group;
51 |
--------------------------------------------------------------------------------
/src/components/Form/Input.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import warning from 'warning';
5 | import Context from './Context';
6 |
7 | const propTypes = {
8 | /** The HTML input type, which is only relevant if as is 'input' (the default). */
9 | type: PropTypes.string,
10 | /**
11 | * The `value` attribute of underlying input
12 | *
13 | * @controllable onChange
14 | * */
15 | value: PropTypes.oneOfType([
16 | PropTypes.number,
17 | PropTypes.string,
18 | ]),
19 | /** Uses controlId from `` if not explicitly specified. */
20 | id: PropTypes.string,
21 | /**
22 | * Make the control disabled
23 | * @default false
24 | * */
25 | disabled: PropTypes.bool,
26 | /**
27 | * Uses requiredControl from `` if not explicitly specified.
28 | * @default false
29 | * */
30 | required: PropTypes.bool,
31 | /**
32 | * Make the control readonly
33 | * @default false
34 | * */
35 | readOnly: PropTypes.bool,
36 | /**
37 | * Input size variants
38 | * @default 'medium'
39 | * */
40 | sizeInput: PropTypes.oneOf([
41 | 'small',
42 | 'medium',
43 | 'large',
44 | ]),
45 | /**
46 | * Add "valid" validation styles to the control
47 | * @default false
48 | * */
49 | isValid: PropTypes.bool,
50 | /**
51 | * Add "invalid" validation styles to the control and accompanying label
52 | * @default false
53 | * */
54 | isInvalid: PropTypes.bool,
55 | /** Remove border all state */
56 | isBorderNone: PropTypes.bool,
57 |
58 | /** Reset background to transparent*/
59 | isBackgroundReset: PropTypes.bool,
60 | /**
61 | * The underlying HTML element to use when rendering the FormControl.
62 | *
63 | * @type {('input'|'textarea')}
64 | * @default input
65 | */
66 | as: PropTypes.elementType,
67 | };
68 |
69 | const defaultProps = {
70 | };
71 | const Input = React.forwardRef(({ className, sizeInput, required, id, type, disabled, isValid, isInvalid, isBorderNone, isBackgroundReset, as: Component = 'input', ...props }, ref) => {
72 | const { controlId, sizeControl, requiredControl, disabledControl } = useContext(Context);
73 | warning(
74 | controlId == null || !id,
75 | '`controlId` is ignored on `` when `id` is specified.',
76 | );
77 | const sizeInputSet = sizeInput || sizeControl;
78 | const requiredSet = required || requiredControl;
79 | const disabledOri = disabled || disabledControl;
80 | return (
81 |
100 | );
101 | });
102 | Input.displayName = 'FormInput';
103 | Input.propTypes = propTypes;
104 | Input.defaultProps = defaultProps;
105 | export default Input;
106 |
--------------------------------------------------------------------------------
/src/components/Form/InputGroup.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import classNames from 'classnames';
3 | import PropTypes from 'prop-types';
4 | import createBlock from 'utils/createBlock';
5 | import Context from './Context';
6 |
7 | const propTypes = {
8 | /**
9 | * You can use a custom element type for this component.
10 | * @default div
11 | * */
12 | as: PropTypes.elementType,
13 | };
14 |
15 | const defaultProps = {
16 | };
17 |
18 | const InputGroup = React.forwardRef(({ className, as: Component = 'div', ...props }, ref) => {
19 | const { sizeControl } = useContext(Context);
20 | return (
21 |
31 | );
32 | });
33 |
34 | const Append = createBlock('FormInputGroup-append u-flex');
35 | const Prepend = createBlock('FormInputGroup-prepend u-flex ');
36 | const Text = createBlock('FormInputGroup-text u-flex u-alignItemsCenter u-textGray u-textCenter u-backgroundLightest u-textNoWrap');
37 |
38 | InputGroup.Text = Text;
39 | InputGroup.Append = Append;
40 | InputGroup.Prepend = Prepend;
41 | InputGroup.displayName = 'FormInputGroup';
42 | InputGroup.defaultProps = defaultProps;
43 | InputGroup.propTypes = propTypes;
44 | export default InputGroup;
45 |
--------------------------------------------------------------------------------
/src/components/Form/Label.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import warning from 'warning';
5 | import Context from './Context';
6 |
7 | const propTypes = {
8 | /**
9 | * Uses sizeControl from `` if not explicitly specified.
10 | * @default 'medium'
11 | * */
12 | sizeLabel: PropTypes.oneOf([
13 | 'small',
14 | 'medium',
15 | 'large',
16 | ]),
17 | /**
18 | * Uses requiredId from `` if not explicitly specified.
19 | * @default false
20 | * */
21 | required: PropTypes.bool,
22 | /** Uses controlId from `` if not explicitly specified. */
23 | htmlFor: PropTypes.string,
24 | };
25 |
26 | const defaultProps = {
27 | };
28 |
29 | const labelSizes = {
30 | small: 'u-text200',
31 | medium: '',
32 | large: '',
33 | };
34 | const Label = React.forwardRef(({ className, sizeLabel, required, htmlFor, as: Component = 'label', ...props }, ref) => {
35 | const { controlId, sizeControl, requiredControl } = useContext(Context);
36 |
37 | warning(
38 | controlId == null || !htmlFor,
39 | '`controlId` is ignored on `` when `htmlFor` is specified.',
40 | );
41 | const htmlForSet = htmlFor || controlId;
42 | const requiredSet = required || requiredControl;
43 | const sizeLabelSet = sizeLabel || sizeControl;
44 | return (
45 |
58 | );
59 | });
60 | Label.displayName = 'FormLabel';
61 | Label.propTypes = propTypes;
62 | Label.defaultProps = defaultProps;
63 |
64 | export default Label;
65 |
--------------------------------------------------------------------------------
/src/components/Form/Select.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import warning from 'warning';
5 | import Icon from 'components/Icon';
6 | import Context from './Context';
7 |
8 | const propTypes = {
9 | /**
10 | * The `value` attribute of underlying input
11 | *
12 | * @controllable onChange
13 | * */
14 | value: PropTypes.oneOfType([
15 | PropTypes.number,
16 | PropTypes.string,
17 | ]),
18 | /** Uses controlId from `` if not explicitly specified. */
19 | id: PropTypes.string,
20 | /**
21 | * Make the control disabled
22 | * @default false
23 | * */
24 | disabled: PropTypes.bool,
25 | /**
26 | * Uses requiredControl from `` if not explicitly specified.
27 | * @default false
28 | * */
29 | required: PropTypes.bool,
30 | /**
31 | * Input size variants
32 | * @default 'medium'
33 | * */
34 | sizeInput: PropTypes.oneOf([
35 | 'small',
36 | 'medium',
37 | 'large',
38 | ]),
39 | /**
40 | * Add "valid" validation styles to the control
41 | * @default false
42 | * */
43 | isValid: PropTypes.bool,
44 | /**
45 | * Add "invalid" validation styles to the control and accompanying label
46 | * @default false
47 | * */
48 | isInvalid: PropTypes.bool,
49 | /** Remove border all state */
50 | isBorderNone: PropTypes.bool,
51 | /** Reset background to transparent*/
52 | isBackgroundReset: PropTypes.bool,
53 | };
54 |
55 | const defaultProps = {
56 | };
57 | const Select = React.forwardRef(({ className, sizeInput, required, multiple, id, type, disabled, isValid, isInvalid, isBorderNone, isBackgroundReset, as: Component = 'div', ...props }, ref) => {
58 | const { controlId, sizeControl, requiredControl, disabledControl } = useContext(Context);
59 | warning(
60 | controlId == null || !id,
61 | '`controlId` is ignored on `` when `id` is specified.',
62 | );
63 | const sizeInputSet = sizeInput || sizeControl;
64 | const requiredSet = required || requiredControl;
65 | const disabledOri = disabled || disabledControl;
66 | const [isFocus, setFocus] = useState(false);
67 | return (
68 |
84 |
114 | );
115 | });
116 | Select.displayName = 'FormSelect';
117 | Select.propTypes = propTypes;
118 | Select.defaultProps = defaultProps;
119 | export default Select;
120 |
--------------------------------------------------------------------------------
/src/components/Form/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Check from './Check';
3 | import File from './File';
4 | import Input from './Input';
5 | import Label from './Label';
6 | import Feedback from './Feedback';
7 | import Group from './Group';
8 | import InputGroup from './InputGroup';
9 | import Select from './Select';
10 |
11 |
12 | const Form = React.forwardRef((props, ref) => (
13 |
17 | ));
18 | Form.Group = Group;
19 | Form.Check = Check;
20 | Form.File = File;
21 | Form.Input = Input;
22 | Form.InputGroup = InputGroup;
23 | Form.Label = Label;
24 | Form.Feedback = Feedback;
25 | Form.displayName = 'Form';
26 | Form.Select = Select;
27 | export default Form;
28 |
--------------------------------------------------------------------------------
/src/components/Header/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import PropTypes from 'prop-types';
4 | import createBlock from 'utils/createBlock';
5 |
6 | const propTypes = {
7 | /** Whether or not the Header is visible. */
8 | show: PropTypes.bool,
9 | /** Custom className for Inner */
10 | innerClassName: PropTypes.string,
11 | };
12 | const defaultProps = {
13 | show: true,
14 | };
15 |
16 | const Header = React.forwardRef(({ className, innerClassName, fullWidth, show, children, ...props }, ref) => {
17 | if (!show) return null;
18 | return (
19 |
28 |
33 |
38 | {children}
39 |
40 |
41 |
![]()
` element */
11 | src: PropTypes.string,
12 | /** Providing a alt if `src` exits */
13 | alt: PropTypes.string,
14 | /** Set the width of the logo */
15 | width: PropTypes.number,
16 | /** Set the height of the logo */
17 | height: PropTypes.number,
18 | };
19 | const defaultProps = {
20 | alt: 'Logo',
21 | };
22 | const Logo = React.forwardRef(({ className, name, src, alt, height, width, as: Component = 'div', ...props }, ref) => {
23 | let nameOri = name;
24 | let srcOri = src;
25 | if (srcOri) {
26 | nameOri = false;
27 | } else if (nameOri) {
28 | srcOri = Plugins
29 | .getPlugins(PluginType.ASSET)
30 | .traverseCall('getAsset', 'logo', nameOri)
31 | .find(asset => !!asset);
32 | }
33 | return (
34 |
43 | {srcOri && (
44 |
45 | )}
46 |
47 | );
48 | });
49 |
50 |
51 | Logo.displayName = 'Logo';
52 | Logo.defaultProps = defaultProps;
53 | Logo.propTypes = propTypes;
54 | export default Logo;
55 |
--------------------------------------------------------------------------------
/src/components/Media/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 |
5 | const propTypes = {
6 | /** Set the aspect ration of the embed */
7 | aspectRatio: PropTypes.oneOf([
8 | 'square',
9 | 'classic',
10 | 'wide',
11 | 'cinema',
12 | ]),
13 | /** You can use a custom element type for this component. */
14 | as: PropTypes.elementType,
15 | };
16 | const defaultProps = {
17 | aspectRatio: 'wide',
18 | as: 'embed',
19 | };
20 | const aspectRatios = {
21 | square: 'Media--1by1',
22 | classic: 'Media--4by3',
23 | wide: 'Media--16by9',
24 | cinema: 'Media--21by9',
25 | };
26 |
27 | const Media = React.forwardRef(({ className, aspectRatio, width, height, style, as: Component = 'embed', ...props }, ref) => {
28 | const mergeStyle = {
29 | ...props.style,
30 | width: width || undefined,
31 | height: height || undefined,
32 | };
33 | return (
34 |
43 |
50 |
51 | );
52 | });
53 |
54 | Media.displayName = 'Media';
55 | Media.defaultProps = defaultProps;
56 | Media.propTypes = propTypes;
57 | export default Media;
58 |
--------------------------------------------------------------------------------
/src/components/Message/Context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Context = React.createContext({ variant: undefined, type: undefined });
4 | export default Context;
5 |
--------------------------------------------------------------------------------
/src/components/Message/Title.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import classNames from 'classnames';
3 | import { messagesVariants } from 'constants/messages';
4 | import Context from './Context';
5 |
6 | const propTypes = {
7 | };
8 |
9 | const defaultProps = {
10 | };
11 |
12 | export const Title = React.forwardRef(({ className, children, ...props }, ref) => {
13 | const { variant, type } = useContext(Context);
14 | const variantOri = messagesVariants.find(item => item.type === type && item.id === variant);
15 | return (
16 |
26 | {children}
27 |
28 | );
29 | });
30 |
31 | Title.displayName = 'MessagesTitle';
32 | Title.propTypes = propTypes;
33 | Title.defaultProps = defaultProps;
34 | export default Title;
35 |
--------------------------------------------------------------------------------
/src/components/Modal/Context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const ModalContext = React.createContext({ onHide() {} });
4 |
5 | export default ModalContext;
6 |
--------------------------------------------------------------------------------
/src/components/Modal/Header.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import useEventCallback from '@restart/hooks/useEventCallback';
5 | import Icon from 'components/Icon';
6 | import ModalContext from './Context';
7 |
8 |
9 | const propTypes = {
10 | /** Specify whether the Component should contain a close button */
11 | closeButton: PropTypes.bool,
12 | /** A Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically be propagated up to the parent Modal onHide. */
13 | onHide: PropTypes.func,
14 | };
15 |
16 | const defaultProps = {
17 | closeButton: false,
18 | };
19 |
20 | const Header = React.forwardRef(({ className, children, closeButton, onHide, ...props }, ref) => {
21 | const context = useContext(ModalContext);
22 | const [closeHover, setCloseHover] = useState(false);
23 | const handleClick = useEventCallback(() => {
24 | if (context) context.onHide();
25 | if (onHide) onHide();
26 | });
27 |
28 | return (
29 |
34 | {children}
35 | {closeButton && (
36 |
51 | )}
52 |
53 | );
54 | });
55 |
56 | Header.displayName = 'ModalHeader';
57 | Header.defaultProps = defaultProps;
58 | Header.propTypes = propTypes;
59 | export default Header;
60 |
--------------------------------------------------------------------------------
/src/components/Modal/Inside.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | const Inside = React.forwardRef(({ children, ...props }, ref) => (
5 |
15 | ));
16 | Inside.defaultProps = {};
17 | Inside.displayName = 'ModalInside';
18 | Inside.propTypes = {};
19 |
20 | export default Inside;
21 |
--------------------------------------------------------------------------------
/src/components/MultiSteps/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import Item from './Item';
5 |
6 | const propTypes = {
7 | /**
8 | * Defines the current active step index.
9 | * @controllable onChange
10 | * */
11 | current: PropTypes.number,
12 | /** Custom current label */
13 | currentLabel: PropTypes.string,
14 | /**
15 | * Callback fired when the current active step changes.
16 | * @controllable current
17 | * */
18 | onChange: PropTypes.func,
19 | /** Define direction of the MultiSteps */
20 | direction: PropTypes.oneOf([
21 | 'horizontal',
22 | 'vertical',
23 | ]),
24 | /**
25 | * The MultiSteps visual variant
26 | */
27 | variant: PropTypes.oneOf([
28 | 'primary',
29 | 'accent',
30 | 'positive',
31 | 'warning',
32 | 'negative',
33 | 'white',
34 | ]),
35 | };
36 |
37 | const defaultProps = {
38 | direction: 'horizontal',
39 | variant: 'primary',
40 | };
41 |
42 | const MultiSteps = React.forwardRef(({ className, current, currentLabel, children, variant, direction, onChange, as: Component = 'div', ...props }, ref) => {
43 | const numChildren = React.Children.count(children);
44 | const modifiedChildren = React.Children.map(children, (child, index) => {
45 | if (!child) {
46 | return null;
47 | }
48 | return React.cloneElement(
49 | child, ({
50 | className: direction !== 'vertical' && `u-size${numChildren / numChildren}of${numChildren}`,
51 | style: direction === 'vertical' ? { height: `calc(100% * 1/${numChildren})` } : null,
52 | isLast: index === numChildren - 1,
53 | isCompleted: index < current,
54 | isActive: index === current,
55 | step: index + 1,
56 | onClick: () => onChange(index),
57 | currentLabel,
58 | direction,
59 | variant,
60 | })
61 | );
62 | });
63 | return (
64 |
74 | {modifiedChildren}
75 |
76 | );
77 | });
78 |
79 | MultiSteps.displayName = 'MultiSteps';
80 | MultiSteps.defaultProps = defaultProps;
81 | MultiSteps.propTypes = propTypes;
82 | MultiSteps.Item = Item;
83 | export default MultiSteps;
84 |
--------------------------------------------------------------------------------
/src/components/PageLayout/Body.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import classNames from 'classnames';
3 | import Context from './Context';
4 |
5 |
6 | export const PageLayoutBody = React.forwardRef(({ className, children, ...props }, ref) => {
7 | const { bodyProps } = useContext(Context);
8 | const mergeProps = {
9 | ref,
10 | ...bodyProps,
11 | ...props,
12 | };
13 | return (
14 |
23 | {children}
24 |
25 | );
26 | });
27 |
28 | PageLayoutBody.displayName = 'PageLayout.Body';
29 | PageLayoutBody.propTypes = {};
30 | PageLayoutBody.defaultProps = {};
31 | export default PageLayoutBody;
32 |
--------------------------------------------------------------------------------
/src/components/PageLayout/Context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Context = React.createContext();
4 | export default Context;
5 |
--------------------------------------------------------------------------------
/src/components/PageLayout/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import classNames from 'classnames';
3 | import Context from './Context';
4 |
5 |
6 | export const PageLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
7 | const { footerProps } = useContext(Context);
8 | const mergeProps = {
9 | ref,
10 | ...footerProps,
11 | ...props,
12 | };
13 | return (
14 |
22 |
23 | {children}
24 |
25 | );
26 | });
27 |
28 | PageLayoutFooter.displayName = 'PageLayout.Footer';
29 | PageLayoutFooter.propTypes = {};
30 | PageLayoutFooter.defaultProps = {};
31 | export default PageLayoutFooter;
32 |
--------------------------------------------------------------------------------
/src/components/PageLayout/Header.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import classNames from 'classnames';
3 | import Context from './Context';
4 |
5 |
6 | export const PageLayoutHeader = React.forwardRef(({ className, children, ...props }, ref) => {
7 | const { headerProps } = useContext(Context);
8 | const mergeProps = {
9 | ref,
10 | ...headerProps,
11 | ...props,
12 | };
13 | return (
14 |
22 | {children}
23 |
24 | );
25 | });
26 |
27 | PageLayoutHeader.displayName = 'PageLayout.Header';
28 | PageLayoutHeader.propTypes = {};
29 | PageLayoutHeader.defaultProps = {};
30 | export default PageLayoutHeader;
31 |
--------------------------------------------------------------------------------
/src/components/PageLayout/index.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import classNames from 'classnames';
3 | import PropTypes from 'prop-types';
4 | import Context from './Context';
5 | import PageLayoutHeader from './Header';
6 | import PageLayoutBody from './Body';
7 | import PageLayoutFooter from './Footer';
8 |
9 | const propTypes = {
10 | /**
11 | * Header props
12 | */
13 | headerProps: PropTypes.object,
14 | /**
15 | * Body props
16 | */
17 | bodyProps: PropTypes.object,
18 | /**
19 | * Footer props
20 | */
21 | footerProps: PropTypes.object,
22 | };
23 |
24 | const defaultProps = {
25 | headerProps: {},
26 | bodyProps: {},
27 | footerProps: {},
28 | };
29 |
30 | const PageLayout = React.forwardRef(({ children, className, headerProps, bodyProps, footerProps, ...props }, ref) => {
31 | const context = useMemo(() => ({
32 | headerProps,
33 | bodyProps,
34 | footerProps,
35 | }), [
36 | headerProps,
37 | bodyProps,
38 | footerProps]);
39 | return (
40 |
41 |
50 | {children}
51 |
52 |
53 | );
54 | });
55 |
56 | PageLayout.displayName = 'PageLayout';
57 | PageLayout.defaultProps = defaultProps;
58 | PageLayout.propTypes = propTypes;
59 | PageLayout.Header = PageLayoutHeader;
60 | PageLayout.Body = PageLayoutBody;
61 | PageLayout.Footer = PageLayoutFooter;
62 | export default PageLayout;
63 |
--------------------------------------------------------------------------------
/src/components/Pagination/Item.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import Button from 'components/Button';
5 | import Icon from 'components/Icon';
6 | import SafeAnchor from 'components/SafeAnchor';
7 |
8 | const propTypes = {
9 | /** Styles PageItem as active, and renders a `` instead of an ``. */
10 | active: PropTypes.bool,
11 | /** Disables the PageItem */
12 | disabled: PropTypes.bool,
13 | };
14 |
15 | const defaultProps = {
16 | active: false,
17 | disabled: false,
18 | };
19 |
20 | export const PageItem = React.forwardRef(({ className, active, safeItem, disabled, children, displayName, ...props }, ref) => {
21 | let variant = active ? 'primary' : 'secondary';
22 | if (safeItem) {
23 | variant = 'default';
24 | }
25 | const Component = active || disabled || safeItem ? 'span' : SafeAnchor;
26 | return (
27 |
35 |
36 |
45 |
46 |
47 | );
48 | });
49 |
50 | PageItem.displayName = 'PaginationItem';
51 | PageItem.propTypes = propTypes;
52 | PageItem.defaultProps = defaultProps;
53 |
54 | function createButton(name, defaultValue, safeItem, className) {
55 | return class extends React.Component {
56 | static displayName = name;
57 |
58 | render() {
59 | const { children, ...props } = this.props;
60 | delete props.active;
61 | return (
62 |
63 | {children || defaultValue}
64 |
65 | );
66 | }
67 | };
68 | }
69 | export const Prev = createButton('Prev', , false, 'Pagination-prev');
70 | export const Ellipsis = createButton('Ellipsis', , true);
71 | export const Next = createButton('Next', , false, 'Pagination-next');
72 |
--------------------------------------------------------------------------------
/src/components/Pagination/index.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import Context from 'components/Form/Context';
5 | import { Prev, Next, Ellipsis, PageItem } from './Item';
6 |
7 | const propTypes = {
8 | /** PageItem size variants */
9 | sizeControl: PropTypes.oneOf(['small', 'medium', 'large']),
10 | };
11 |
12 |
13 | const defaultProps = {
14 | sizeControl: 'small',
15 | };
16 |
17 | const Pagination = React.forwardRef(({ className, sizeControl, as: Component = 'ul', ...props }, ref) => {
18 | const context = useMemo(() => ({ sizeControl }), [sizeControl]);
19 | return (
20 |
21 |
30 |
31 | );
32 | }
33 | );
34 |
35 | Pagination.Prev = Prev;
36 | Pagination.Next = Next;
37 | Pagination.Ellipsis = Ellipsis;
38 | Pagination.Item = PageItem;
39 | Pagination.displayName = 'Pagination';
40 | Pagination.propTypes = propTypes;
41 | Pagination.defaultProps = defaultProps;
42 | export default Pagination;
43 |
--------------------------------------------------------------------------------
/src/components/Progress/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import createBlock from 'utils/createBlock';
5 |
6 | const propTypes = {
7 | /** Sets the background class of the progress bar. */
8 | variant: PropTypes.oneOf([
9 | 'primary',
10 | 'accent',
11 | 'warning',
12 | 'positive',
13 | 'negative',
14 | ]),
15 | /** Current value of progress */
16 | now: PropTypes.number,
17 | /** Set the height of the progress bar */
18 | height: PropTypes.number,
19 | /** Show label that represents visual percentage. EG. 60% */
20 | label: PropTypes.node,
21 | /** Custom `class` for label */
22 | labelClassName: PropTypes.string,
23 | /** Change to style border */
24 | border: PropTypes.bool,
25 | /** Uses a gradient to create a striped effect. */
26 | striped: PropTypes.bool,
27 | /** Animate's the stripes from right to left */
28 | animated: PropTypes.bool,
29 | };
30 | const defaultProps = {
31 | variant: 'primary',
32 | now: 100,
33 | height: 8,
34 | label: false,
35 | labelClassName: 'u-text100 u-fontMedium',
36 | animated: false,
37 | striped: false,
38 | border: false,
39 | };
40 |
41 | const variantsClassName = {
42 | backgroundColor: {
43 | primary: 'u-backgroundPrimary',
44 | accent: 'u-backgroundAccent',
45 | warning: 'u-backgroundWarning',
46 | positive: 'u-backgroundPositive',
47 | negative: 'u-backgroundNegative',
48 | },
49 | textColor: {
50 | primary: 'u-textWhite',
51 | accent: 'u-textWhite',
52 | warning: 'u-textDark',
53 | positive: 'u-textWhite',
54 | negative: 'u-textWhite',
55 | },
56 | borderColor: {
57 | primary: 'u-borderPrimary',
58 | accent: 'u-borderAccent',
59 | warning: 'u-borderWarning',
60 | positive: 'u-borderPositive',
61 | negative: 'u-borderNegative',
62 | },
63 | };
64 |
65 | const Progress = React.forwardRef(({ className, labelClassName, border, striped, animated, now, height, label, variant, as: Component = 'div', ...props }, ref) => (
66 |
79 |
87 | {label && (
88 |
94 | {label}
95 |
96 | )}
97 |
83 | {label}
84 |
85 |
86 |
87 | )}
88 |
89 | );
90 | });
91 |
92 | Separator.displayName = 'Separator';
93 | Separator.defaultProps = defaultProps;
94 | Separator.propTypes = propTypes;
95 | export default Separator;
96 |
--------------------------------------------------------------------------------
/src/components/SessionType/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import Icon from 'components/Icon';
5 |
6 | const propTypes = {
7 | /** Custom label */
8 | label: PropTypes.oneOfType([
9 | PropTypes.string,
10 | PropTypes.func,
11 | ]),
12 | /** Custom label of left side */
13 | leftLabel: PropTypes.string,
14 | /**
15 | * The `SessionType` visual variant
16 | */
17 | variant: PropTypes.oneOf([
18 | 'default',
19 | 'positive',
20 | 'warning',
21 | 'accent',
22 | ]),
23 | };
24 |
25 | const defaultProps = {
26 | variant: 'default',
27 | leftLabel: 'Open guide',
28 | };
29 | const variantsClassName = {
30 | default: 'u-textWhite hover:u-textWhite u-backgroundLight hover:u-backgroundSemiGray',
31 | positive: 'u-textWhite hover:u-textWhite u-backgroundPositive hover:u-backgroundPositiveDark',
32 | warning: 'u-textDark hover:u-textDark u-backgroundWarning hover:u-backgroundWarningDark',
33 | accent: 'u-textWhite hover:u-textWhite u-backgroundAccent hover:u-backgroundAccentDark',
34 | };
35 | const SessionType = React.forwardRef(({ className, label, leftLabel, variant, as: Component = 'div', ...props }, ref) => (
36 |
46 |
47 |
48 | {label && (
49 |
50 | {typeof (label) === 'function'
51 | ? label()
52 | : label
53 | }
54 |
55 | )}
56 |
57 |
58 | {leftLabel}
59 |
60 |
61 |
62 | ));
63 |
64 | SessionType.displayName = 'SessionType';
65 | SessionType.defaultProps = defaultProps;
66 | SessionType.propTypes = propTypes;
67 | export default SessionType;
68 |
--------------------------------------------------------------------------------
/src/components/SidebarMenu/Context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const SidebarContext = React.createContext({ });
4 |
5 | export default SidebarContext;
6 |
--------------------------------------------------------------------------------
/src/components/SidebarMenu/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import PropTypes from 'prop-types';
4 | import createBlock from 'utils/createBlock';
5 | import Item from './Item';
6 | import SubMenu from './SubMenu';
7 | import SidebarContext from './Context';
8 |
9 | const propTypes = {
10 | /**
11 | * Set's the size of all SidebarMenu.Item & SidebarMenu.SubMenu
12 | * */
13 | size: PropTypes.oneOf([
14 | 'small',
15 | 'medium',
16 | ]),
17 | /** Set current menu item*/
18 | current: PropTypes.string,
19 | /** Callback fired when the menu item is clicked. */
20 | onSelect: PropTypes.func,
21 | };
22 |
23 | const defaultProps = {
24 | size: 'medium',
25 | };
26 | const SidebarMenu = React.forwardRef(({ className, children, current, onSelect, size, ...props }, ref) => {
27 | const modifiedChildren = React.Children.map(children, (child, index) => {
28 | if (!child) {
29 | return null;
30 | }
31 | const path = child.props.eventKey || index;
32 | return React.cloneElement(
33 | child, ({
34 | level: 1,
35 | path: path.toString(),
36 | })
37 | );
38 | });
39 | return (
40 |
47 |
54 |
61 | {modifiedChildren}
62 |
63 |
0 && !fullWidth && (direction !== 'vertical') && (visual !== 'filled')) && 'u-marginLeftSmall',
37 | fullWidth && 'u-flexGrow1',
38 | (index > 0 && visual === 'filled' && (direction !== 'vertical')) && 'u-borderLeft',
39 | (index > 0 && visual === 'filled' && (direction === 'vertical')) && 'u-borderTop',
40 | active && 'is-active',
41 | disabled ? 'is-disabled u-cursorNotAllow' : 'u-cursorPointer',
42 | className && className
43 | )}
44 | >
45 | {active && (
46 |
53 | )}
54 |
68 | {children}
69 |
70 |
71 |
69 | {modifiedChildren}
70 | {direction === 'vertical' && (
71 |
72 | )}
73 |
35 |
46 |
51 |
52 | {!nonLabel && (
53 |
58 | {checked ? textLabelOn : textLabelOff}
59 |
60 | )}
61 |
99 | {!noArrow && (
100 |
107 | )}
108 |
115 | {children}
116 |
117 |
62 | {bgImage && (
63 |
64 |
65 |
66 | )}
67 |
68 | {children}
69 |
70 | {dismissible && (
71 |
setDismissButtonHover(dismissButtonHover => !dismissButtonHover)}
74 | onMouseLeave={() => setDismissButtonHover(dismissButtonHover => !dismissButtonHover)}
75 | onClick={handleClose}
76 | >
77 |
84 |
85 | )}
86 |
0 && !isSubItem) && 'u-marginLeftLarge',
47 | active && 'is-active',
48 | isSubItem ? 'u-flex hover:u-backgroundLightest u-paddingHorizontalSmall' : 'u-flexInline u-alignItemsCenter',
49 | disabled ? 'is-disabled u-cursorNotAllow u-pointerEventsNone' : 'u-cursorPointer',
50 | )}
51 | >
52 | {(active && !isSubItem) && (
53 | <>
54 |
59 |
64 |
65 | )}
66 |
75 |
76 | {children}
77 |
78 |
79 | {badge && (
80 |
81 | {typeof (badge) === 'function'
82 | ? badge()
83 | : {badge}
84 | }
85 |
86 | )}
87 |
88 |
46 |
53 | {modifiedChildren}
54 |
55 |
4 |
5 |