@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/datePicker/datePicker.story.js

@@ -32,7 +32,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
           ),
           _react2.default.createElement(_components.DatePicker, {
             label: 'from',
-            error: "Select date",
+            error: 'Select date',
             rangePicker: false,
             minDate: null,
             maxDate: null,
@@ -336,4 +336,170 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       )
     )
   );
+});
+
+(0, _react3.storiesOf)('DatePicker').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Light', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        'div',
+        { style: { width: '100%' } },
+        _react2.default.createElement(
+          'div',
+          { style: { width: '200px', marginTop: '30px' } },
+          _react2.default.createElement(
+            'h5',
+            { style: { fontWeight: 'bold' } },
+            'Simple Absoulte'
+          ),
+          _react2.default.createElement(_components.DatePicker, {
+            theme: 'nexc',
+            label: 'from',
+            rangePicker: false,
+            minDate: null,
+            maxDate: null,
+            inline: false,
+            selected: null,
+            onSelectionChange: function onSelectionChange(date) {
+              console.log(date);
+            }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { width: '300px', marginTop: '30px' } },
+          _react2.default.createElement(
+            'h5',
+            { style: { fontWeight: 'bold' } },
+            'Simple Absoulte - default Selected'
+          ),
+          _react2.default.createElement(_components.DatePicker, {
+            theme: 'nexc',
+            label: 'from',
+            rangePicker: false,
+            minDate: null,
+            maxDate: null,
+            inline: false,
+            selected: ['17/10/2018'],
+            onSelectionChange: function onSelectionChange(date) {
+              console.log(date);
+            }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { width: '300px', marginTop: '30px' } },
+          _react2.default.createElement(
+            'h5',
+            { style: { fontWeight: 'bold' } },
+            'Simple Inline '
+          ),
+          _react2.default.createElement(_components.DatePicker, {
+            theme: 'nexc',
+            label: 'from',
+            rangePicker: false,
+            minDate: null,
+            maxDate: null,
+            inline: true,
+            selected: null,
+            onSelectionChange: function onSelectionChange(date) {
+              console.log(date);
+            }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { width: '300px', marginTop: '30px' } },
+          _react2.default.createElement(
+            'h5',
+            { style: { fontWeight: 'bold' } },
+            'Simple Inline - Default selected'
+          ),
+          _react2.default.createElement(_components.DatePicker, {
+            theme: 'nexc',
+            label: 'from',
+            rangePicker: false,
+            minDate: null,
+            maxDate: null,
+            inline: true,
+            selected: ['17/8/2018'],
+            onSelectionChange: function onSelectionChange(date) {
+              console.log(date);
+            }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { width: '300px', marginTop: '30px' } },
+          _react2.default.createElement(
+            'h5',
+            { style: { fontWeight: 'bold' } },
+            'Simple Inline: Min - Max and disabled Dates',
+            _react2.default.createElement('br', null),
+            '15/06/2018 - 14/010/2018, ["15/08/2018","19/08/2018","22/8/2018"]'
+          ),
+          _react2.default.createElement(_components.DatePicker, {
+            theme: 'nexc',
+            label: 'from',
+            rangePicker: false,
+            minDate: '15/06/2018',
+            maxDate: '14/10/2018',
+            disabledDates: ['15/08/2018', '19/08/2018', '22/8/2018'],
+            inline: true,
+            onSelectionChange: function onSelectionChange(date) {
+              console.log(date);
+            }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { width: '300px', marginTop: '30px' } },
+          _react2.default.createElement(
+            'h5',
+            { style: { fontWeight: 'bold' } },
+            'Date Range popup'
+          ),
+          _react2.default.createElement(_components.DatePicker, {
+            theme: 'nexc',
+            label: 'from',
+            label2: 'to',
+            rangePicker: true,
+            minDate: null,
+            maxDate: null,
+            inline: false,
+            selected: null,
+            onSelectionChange: function onSelectionChange(date) {
+              console.log(date);
+            }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { width: '300px', marginTop: '30px' } },
+          _react2.default.createElement(
+            'h5',
+            { style: { fontWeight: 'bold' } },
+            'Date Range inline'
+          ),
+          _react2.default.createElement(_components.DatePicker, {
+            theme: 'nexc',
+            label: 'from',
+            label2: 'to',
+            rangePicker: true,
+            minDate: null,
+            maxDate: null,
+            inline: true,
+            selected: null,
+            onSelectionChange: function onSelectionChange(date) {
+              console.log(date);
+            }
+          })
+        )
+      )
+    )
+  );
 });

package/atoms/dateTime/dateTime.story.js

@@ -14,7 +14,7 @@ var _dateTime2 = _interopRequireDefault(_dateTime);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('DateTime').add('default', function () {
+(0, _react3.storiesOf)('DateTime').add('light theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     { title: 'DateTime', background: 'light' },
@@ -37,4 +37,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       )
     )
   );
+});
+
+(0, _react3.storiesOf)('DateTime').add('dark theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'DateTime', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'h1',
+          null,
+          _dateTime2.default.toDateString(1579176064345, 'mmm DD, YYYY')
+        ),
+        _react2.default.createElement(
+          'h1',
+          null,
+          _dateTime2.default.toTimeString(1579176064345, 'HH:MM AP')
+        )
+      )
+    )
+  );
 });

package/atoms/draftInputText/draftInputText.js

@@ -0,0 +1,358 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+var _templateObject = _taggedTemplateLiteral(['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width:92%;\n  margin-bottom:10px;\n  margin-top:10px\n  display: block;\n  > label {\n    color: #999999;\n    font-size: 14px;\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n'], ['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width:92%;\n  margin-bottom:10px;\n  margin-top:10px\n  display: block;\n  > label {\n    color: #999999;\n    font-size: 14px;\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n'], ['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n'], ['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n']),
+    _templateObject4 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n'], ['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ', ';\n \n\n  font-family: "SFUIText-Medium";\n  font-size: 14px;\n  color: ', ';\n\n  display: inline-block;\n  position: relative;\n  padding: ', ';\n  &:hover {\n    border-color: ', ';\n  }\n\n  &:focus-within {\n    border-color: ', ';\n  }\n\n  &::placeholder {\n    color: ', ';\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ', ';\n    opacity: ', ';\n  }\n\n  \n  ', '\n\n\n  \n\n'], ['\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ', ';\n \n\n  font-family: "SFUIText-Medium";\n  font-size: 14px;\n  color: ', ';\n\n  display: inline-block;\n  position: relative;\n  padding: ', ';\n  &:hover {\n    border-color: ', ';\n  }\n\n  &:focus-within {\n    border-color: ', ';\n  }\n\n  &::placeholder {\n    color: ', ';\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ', ';\n    opacity: ', ';\n  }\n\n  \n  ', '\n\n\n  \n\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _draftJs = require('draft-js');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _tokens = require('@desynova-digital/tokens');
+
+var _draftConvert = require('draft-convert');
+
+var _icon = require('../icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _immutable = require('immutable');
+
+var _immutable2 = _interopRequireDefault(_immutable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var DraftInputTextDiv = _styledComponents2.default.div(_templateObject);
+
+var PasswordToggleButton = _styledComponents2.default.div(_templateObject2);
+
+var CountWrappper = _styledComponents2.default.div(_templateObject3);
+
+var DraftInputError = _styledComponents2.default.span(_templateObject4, function (props) {
+  return _tokens.colors[props.theme].inputError.color;
+});
+
+var DraftInputText = function DraftInputText(_ref) {
+  var maxLength = _ref.maxLength,
+      defaultValue = _ref.defaultValue,
+      type = _ref.type,
+      showLengthCount = _ref.showLengthCount,
+      label = _ref.label,
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, ['maxLength', 'defaultValue', 'type', 'showLengthCount', 'label', 'value']);
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      hidden = _useState2[0],
+      togglePassword = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      diff = _useState4[0],
+      setDiff = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focus = _useState6[0],
+      setFocus = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(function () {
+    return _draftJs.EditorState.createEmpty();
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      editorState = _useState8[0],
+      setEditorState = _useState8[1];
+
+  var contentLength = editorState.getCurrentContent().getPlainText('').length;
+  if (props.error && props.error.length > 0) {
+    var errorMesssage = props.error;
+  }
+
+  if (props.readOnly) {
+    props.disabled = true;
+  }
+
+  if (props.passwordButton) {
+    var passwordButton = props.passwordButton;
+  }
+
+  var handleKeyCommand = function handleKeyCommand(command, editorState) {
+    if (command === 'split-block') {
+      props.onKeyDownFn();
+      return 'Entered Pressed';
+    } else {
+      var newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
+
+      if (newState) {
+        setEditorState(newState);
+        return 'handled';
+      }
+      return 'not-handled';
+    }
+  };
+
+  var _getLengthOfSelectedText = function _getLengthOfSelectedText() {
+    var currentSelection = editorState.getSelection();
+    if (currentSelection.isCollapsed()) return 0;
+
+    var selectedBlocks = DraftJS.SelectionState.createEmpty(currentSelection.getStartKey()).merge({
+      focusKey: currentSelection.getEndKey(),
+      focusOffset: currentSelection.getEndOffset()
+    }).getBlocksAsArray();
+
+    return selectedBlocks.reduce(function (length, block) {
+      return length + block.getText().length;
+    }, 0);
+  };
+
+  var _handleBeforeInputAndPastedText = function _handleBeforeInputAndPastedText(charsOrText, editorState) {
+    var currentContent = editorState.getCurrentContent();
+    var currentContentLength = currentContent.getPlainText('').length;
+    var selectedTextLength = _getLengthOfSelectedText();
+
+    if (charsOrText && typeof charsOrText === 'string') {
+      if (currentContentLength - selectedTextLength + charsOrText.length > maxLength) {
+        console.log('You can type a maximum of ten characters');
+        return 'handled';
+      }
+    } else {
+      if (currentContentLength + charsOrText.length - selectedTextLength > maxLength) {
+        console.log('You can type a maximum of ten characters');
+        return 'handled';
+      }
+    }
+  };
+
+  var _handleChange = function _handleChange(newEditorState) {
+    var contentState = newEditorState.getCurrentContent();
+    var text = contentState.getPlainText();
+
+    if (text.length <= maxLength) {
+      setEditorState(newEditorState);
+    } else {
+      return;
+    }
+  };
+
+  var removeOuterPTag = function removeOuterPTag(htmlString) {
+    var regex = /^<p>(.*?)<\/p>$/;
+    var match = htmlString.match(regex);
+    return match ? match[1] : htmlString;
+  };
+
+  (0, _react.useEffect)(function () {
+    var html = (0, _draftConvert.convertToHTML)(editorState.getCurrentContent());
+    html = removeOuterPTag(html);
+    var obj = {
+      size: contentLength,
+      html: html
+    };
+    if (props.onChange) {
+      props.onChange(obj.html);
+    }
+  }, [editorState]);
+
+  (0, _react.useEffect)(function () {
+    if (diff && value !== '' && value !== undefined) {
+      setDiff(false);
+      setFocus(true);
+      var dummy = (0, _draftConvert.convertFromHTML)(value);
+      var newState = _draftJs.EditorState.createWithContent(dummy);
+      setEditorState(function () {
+        return _draftJs.EditorState.moveFocusToEnd(newState);
+      });
+    }
+  }, [value]);
+
+  (0, _react.useEffect)(function () {
+    var scrollObject = JSON.parse(localStorage.getItem('scrollObject'));
+    if (scrollObject && scrollObject.tableListScrollTop) {
+      if (!props.simpleEdit) {
+        setDiff(true);
+        value = undefined;
+        setEditorState(function () {
+          return _draftJs.EditorState.createEmpty();
+        });
+      }
+    }
+  }, [localStorage.getItem('scrollObject')]);
+
+  return _react2.default.createElement(
+    DraftInputTextDiv,
+    { theme: props.theme, inputWidth: props.inputWidth },
+    _react2.default.createElement(
+      RichTextEditorContainer,
+      _extends({
+        type: hidden ? type : 'text',
+        value: value,
+        defaultValue: defaultValue
+      }, props, {
+        maxLength: maxLength || '',
+        showLengthCount: showLengthCount || false
+      }),
+      _react2.default.createElement(_draftJs.Editor, {
+        editorState: editorState,
+        onChange: _handleChange,
+        handleBeforeInput: _handleBeforeInputAndPastedText,
+        handlePastedText: _handleBeforeInputAndPastedText,
+        handleKeyCommand: handleKeyCommand,
+        onFocus: function onFocus() {
+          return setFocus(true);
+        },
+        onBlur: function onBlur() {
+          return setFocus(false);
+        },
+        handleReturn: function handleReturn(e) {
+          props.onKeyDownFn();
+          return 'handled';
+        }
+      })
+    ),
+    label && _react2.default.createElement(
+      'label',
+      {
+        htmlFor: props.id,
+        className: editorState.getCurrentContent().hasText() || focus ? 'floaton' : ''
+      },
+      '' + label + (props.isRequired ? '*' : '')
+    ),
+    errorMesssage ? _react2.default.createElement(
+      DraftInputError,
+      { value: value, theme: props.theme, error: props.error },
+      errorMesssage
+    ) : '',
+    maxLength && showLengthCount && _react2.default.createElement(
+      CountWrappper,
+      null,
+      contentLength,
+      '/',
+      maxLength
+    ),
+    type == 'password' || passwordButton ? _react2.default.createElement(
+      PasswordToggleButton,
+      {
+        type: 'button',
+        className: 'password-toggle',
+        onClick: function onClick() {
+          return togglePassword(!hidden);
+        },
+        hiddenEye: errorMesssage ? true : false
+      },
+      hidden ? _react2.default.createElement(_icon2.default, { name: 'show-password', width: 18, height: 15, color: '#999' }) : _react2.default.createElement(_icon2.default, { name: 'hide-password', width: 18, height: 15, color: '#999' })
+    ) : ''
+  );
+};
+
+var returnPadding = function returnPadding(props) {
+  var digitCount = props.maxLength.toString().length;
+
+  if (props.type === 'password') {
+    return '7px 23px 2px 0px';
+  }
+
+  switch (digitCount) {
+    case 0:
+      return '7px 0px 2px 0px';
+    case 1:
+      return '7px 40px 2px 0px';
+    case 2:
+      return '7px 60px 2px 0px';
+    case 3:
+      return '7px 75px 2px 0px';
+    case 4:
+      return '7px 90px 2px 0px';
+    case 5:
+      return '7px 110px 2px 0px';
+    default:
+      return '7px 0px 2px 0px';
+  }
+};
+
+var RichTextEditorContainer = _styledComponents2.default.div(_templateObject5, function (props) {
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.border : _tokens.colors.dark.inputCommon.border;
+}, function (props) {
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
+}, function (props) {
+  return returnPadding(props || '');
+}, function (props) {
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
+}, function (props) {
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
+}, function (props) {
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
+}, function (props) {
+  return props.label ? '0' : '1';
+}, function (props) {
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
+}, function (props) {
+  return props.label ? '1' : '1';
+}, function (props) {
+  return props.fieldType === 'inputField' && '\n      .public-DraftStyleDefault-block.public-DraftStyleDefault-ltr {\n        display: inline-block;\n        overflow: hidden;\n        white-space: nowrap;\n        width: 100%;\n      }\n    ';
+});
+
+DraftInputText.propTypes = {
+  masked: _propTypes2.default.bool,
+  /** Make input readOnly if it does not validate constraint */
+  readOnly: _propTypes2.default.bool,
+  /** Use when the expected input is code */
+  code: _propTypes2.default.bool,
+  /** Pass hasError to show error state */
+  hasError: _propTypes2.default.bool,
+  /** Pass error string directly to show error state */
+  error: _propTypes2.default.string,
+  /** onChange transparently passed to the input */
+  onChange: _propTypes2.default.func,
+  onKeyDownFn: _propTypes2.default.func,
+  /** Text to display when the input is empty */
+  placeholder: _propTypes2.default.string,
+  /** The default value for the field */
+  defaultValue: _propTypes2.default.string,
+  /** The (HTML) type for the input. */
+  type: _propTypes2.default.string,
+  value: _propTypes2.default.string,
+  /** The (HTML) maxLength for the input. */
+  maxLength: _propTypes2.default.number,
+  inputWidth: _propTypes2.default.number,
+  showLengthCount: _propTypes2.default.bool,
+  simpleEdit: _propTypes2.default.bool,
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
+  fieldType: _propTypes2.default.oneOf(['inputField', 'textArea'])
+};
+
+DraftInputText.defaultProps = {
+  fieldType: 'inputField',
+  readOnly: false,
+  code: false,
+  error: null,
+  onChange: null,
+  type: 'text',
+  theme: 'light',
+  showLengthCount: false,
+  simpleEdit: false
+};
+
+exports.default = DraftInputText;