@expandorg/components - npm Package Compare versions

Comparing version 0.2.84 to 0.2.85

index.js

@@ -28,3 +28,3 @@ // @flow
 
-import { Input, IconInput, InputLabel } from './src/components/Input';
+import { Input, IconInput } from './src/components/Input';
 
@@ -91,3 +91,2 @@ import { JsScript, withScript, useScript } from './src/components/JsScript';
   IconInput,
-  InputLabel,
   JsScript,
@@ -94,0 +93,0 @@ useScript,

package.json

 {
   "name": "@expandorg/components",
-  "version": "0.2.84",
+  "version": "0.2.85",
   "description": "expand UI components library",
@@ -35,3 +35,3 @@ "main": "index.js",
   },
-  "gitHead": "5045b9c74b82248a6f001e3b637b16206044940b"
+  "gitHead": "bbe0468b8914e56b0d4998d7397e669c26f126aa"
 }

src/components/Autocomplete/AutocompleteInput.js

@@ -5,4 +5,2 @@ import React, { Component, createRef } from 'react';
 
-import { ReactComponent as ArrowDown } from '@expandorg/uikit/assets/arrow-down.svg';
-
 import { targetIsDescendant, KeyCodes } from '../../common/dom';
@@ -13,3 +11,5 @@
 import Suggestion from './Suggestion';
-import TooltipIcon from '../Input/TooltipIcon';
+import TooltipIcon from '../common/TooltipIcon';
+import InputIconsContainer from '../common/InputIconsContainer';
+import ArrowDownIcon from '../common/ArrowDownIcon';
 
@@ -182,6 +182,6 @@ import { containsFilter } from './filterOptions';
         >
-          <div className="gem-autocomplete-icons">
-            <ArrowDown className="gem-autocomplete-arrow" />
+          <InputIconsContainer theme={theme}>
+            <ArrowDownIcon theme={theme} />
             {tooltip && <TooltipIcon tooltip={tooltip} />}
-          </div>
+          </InputIconsContainer>
         </Input>
@@ -188,0 +188,0 @@ {focus && filtered.length !== 0 && (

src/components/DateTime/DateTimeInput.js

@@ -7,3 +7,3 @@ import React, { Component } from 'react';
 
-import { InputLabel } from '../Input';
+import InputLabel from '../common/InputLabel';
 
@@ -10,0 +10,0 @@ import DateTimePicker from './DateTimePicker';

src/components/Dropdown/Dropdown.js

@@ -1,95 +0,93 @@
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-
 import cn from 'classnames';
-import { ReactComponent as ArrowDown } from '@expandorg/uikit/assets/arrow-down.svg';
 
-import { InputLabel } from '../Input';
 import DropdownBase from './DropdownBase';
-import TooltipIcon from '../Input/TooltipIcon';
+import TooltipIcon from '../common/TooltipIcon';
+import InputLabel from '../common/InputLabel';
+import InputIconsContainer from '../common/InputIconsContainer';
+import ArrowDownIcon from '../common/ArrowDownIcon';
 
 import './Dropdown.styl';
 
-export default class Dropdown extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    nullValue: PropTypes.string,
-    tooltip: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    tooltipPosition: PropTypes.string,
-    tooltipOrientation: PropTypes.string,
-    options: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.object])
-    ),
-    theme: PropTypes.oneOf(['default', 'white']),
-    label: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-  };
+export default function Dropdown({
+  className,
+  options,
+  value,
+  label,
+  nullValue,
+  onChange,
+  tooltip,
+  tooltipPosition,
+  tooltipOrientation,
+  theme,
+  formatter,
+}) {
+  const change = useCallback(v => onChange(v), [onChange]);
 
-  static defaultProps = {
-    value: undefined,
-    className: null,
-    tooltip: null,
-    nullValue: null,
-    tooltipPosition: undefined,
-    tooltipOrientation: undefined,
-    theme: 'default',
-    options: [],
-    label: null,
-  };
+  return (
+    <DropdownBase
+      options={options}
+      value={value}
+      nullValue={nullValue}
+      onChange={change}
+      formatter={formatter}
+      className={cn(
+        `gem-dropdown-theme-${theme}`,
+        { 'gem-dropdown--tooltip': !!tooltip },
+        className
+      )}
+    >
+      {({ formatted }) => (
+        <div
+          className={cn('gem-dropdown-content', {
+            'gem-dropdown-content-val': formatted,
+          })}
+        >
+          <InputLabel placeholder={label} />
+          {formatted}
+          <InputIconsContainer theme={theme}>
+            <ArrowDownIcon theme={theme} />
+            {tooltip && (
+              <TooltipIcon
+                tooltip={tooltip}
+                p
+                position={tooltipPosition}
+                orientation={tooltipOrientation}
+              />
+            )}
+          </InputIconsContainer>
+        </div>
+      )}
+    </DropdownBase>
+  );
+}
 
-  handleChange = value => {
-    const { onChange } = this.props;
-    onChange(value);
-  };
+Dropdown.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  nullValue: PropTypes.string,
+  tooltip: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  tooltipPosition: PropTypes.string,
+  tooltipOrientation: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  ),
+  theme: PropTypes.oneOf(['default', 'white']),
+  label: PropTypes.string,
+  formatter: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+};
 
-  render() {
-    const {
-      className,
-      options,
-      value,
-      label,
-      nullValue,
-      tooltip,
-      tooltipPosition,
-      tooltipOrientation,
-      theme,
-    } = this.props;
-
-    return (
-      <DropdownBase
-        options={options}
-        value={value}
-        nullValue={nullValue}
-        onChange={this.handleChange}
-        className={cn(
-          `gem-dropdown-theme-${theme}`,
-          { 'gem-dropdown--tooltip': !!tooltip },
-          className
-        )}
-      >
-        {({ formatted }) => (
-          <div
-            className={cn('gem-dropdown-content', {
-              'gem-dropdown-content-val': formatted,
-            })}
-          >
-            <InputLabel placeholder={label} />
-            {formatted}
-            <div className="gem-dropdown-content-icons">
-              <ArrowDown className="gem-dropdown-content-arrow" />
-              {tooltip && (
-                <TooltipIcon
-                  tooltip={tooltip}
-                  p
-                  position={tooltipPosition}
-                  orientation={tooltipOrientation}
-                />
-              )}
-            </div>
-          </div>
-        )}
-      </DropdownBase>
-    );
-  }
-}
+Dropdown.defaultProps = {
+  value: undefined,
+  className: null,
+  tooltip: null,
+  nullValue: null,
+  tooltipPosition: undefined,
+  tooltipOrientation: undefined,
+  theme: 'default',
+  options: [],
+  label: null,
+  formatter: value => value,
+};

src/components/Dropdown/DropdownBase.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -14,76 +14,72 @@ import cn from 'classnames';
 
-export default class DropdownBase extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    nullValue: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.any).isRequired,
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func.isRequired,
-    formatter: PropTypes.func,
-  };
+export default function DropdownBase({
+  value,
+  options,
+  className,
+  onChange,
+  children,
+  disabled,
+  nullValue,
+  formatter,
+}) {
+  const change = useCallback(({ target }) => onChange(target.value), [
+    onChange,
+  ]);
 
-  static defaultProps = {
-    className: null,
-    nullValue: null,
-    value: '',
-    disabled: false,
-    formatter: value => value,
-  };
+  const classes = cn(
+    'gem-dropdown',
+    { 'gem-dropdown-disabled': disabled },
+    className
+  );
 
-  handleChange = ({ target }) => {
-    const { onChange } = this.props;
-    onChange(target.value);
-  };
+  const selectClasses = cn('gem-dropdown-select', {
+    'gem-dropdown-hidden': !!children,
+  });
 
-  render() {
-    const {
-      value,
-      options,
-      className,
-      children,
-      disabled,
-      nullValue,
-      formatter,
-    } = this.props;
+  const items = options.map(formatItem);
+  const selected = items.find(x => `${x.value}` === `${value}`);
 
-    const classes = cn(
-      'gem-dropdown',
-      { 'gem-dropdown-disabled': disabled },
-      className
-    );
+  return (
+    <div className={classes}>
+      {children({
+        value,
+        formatted: formatter(selected ? selected.label : ''),
+      })}
+      <select
+        disabled={disabled}
+        className={selectClasses}
+        value={value}
+        onChange={change}
+      >
+        {nullValue && (
+          <option value="" disabled>
+            {nullValue}
+          </option>
+        )}
+        {items.map(option => (
+          <option key={option.value} value={option.value}>
+            {formatter(option.label)}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
 
-    const selectClasses = cn('gem-dropdown-select', {
-      'gem-dropdown-hidden': !!children,
-    });
+DropdownBase.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  nullValue: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.any).isRequired,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  formatter: PropTypes.func,
+};
 
-    const items = options.map(formatItem);
-    const selected = items.find(x => `${x.value}` === `${value}`);
-
-    return (
-      <div className={classes}>
-        {children({
-          value,
-          formatted: formatter(selected ? selected.label : ''),
-        })}
-        <select
-          disabled={disabled}
-          className={selectClasses}
-          value={value}
-          onChange={this.handleChange}
-        >
-          {nullValue && (
-            <option value="" disabled>
-              {nullValue}
-            </option>
-          )}
-          {items.map(option => (
-            <option key={option.value} value={option.value}>
-              {formatter(option.label)}
-            </option>
-          ))}
-        </select>
-      </div>
-    );
-  }
-}
+DropdownBase.defaultProps = {
+  className: null,
+  nullValue: null,
+  value: '',
+  disabled: false,
+  formatter: value => value,
+};

src/components/DropdownDate/DropdownDate.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -17,3 +17,3 @@ import cn from 'classnames';
 
-import { DropdownBase } from '../Dropdown';
+import { Dropdown } from '../Dropdown';
 
@@ -32,64 +32,67 @@ import './DropdownDate.styl';
 
-export default class DateInput extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    value: PropTypes.instanceOf(Date),
-    onChange: PropTypes.func.isRequired,
-  };
+export default function DropdownDate({ className, value, theme, onChange }) {
+  const changeDate = useCallback(date => onChange(setDate(value, date)), [
+    onChange,
+    value,
+  ]);
 
-  static defaultProps = {
-    className: null,
-    value: new Date(),
-  };
+  const changeMonth = useCallback(
+    month => {
+      const fixed = fixDate(value, getYear(value), month);
+      onChange(setMonth(fixed, month));
+    },
+    [onChange, value]
+  );
 
-  handleChangeDate = date => {
-    const { onChange, value } = this.props;
-    onChange(setDate(value, date));
-  };
+  const changeYear = useCallback(
+    year => {
+      const fixed = fixDate(value, year, getMonth(value));
+      onChange(setYear(fixed, year));
+    },
+    [onChange, value]
+  );
 
-  handleChangeMonth = month => {
-    const { onChange, value } = this.props;
-    const fixed = fixDate(value, getYear(value), month);
-    onChange(setMonth(fixed, month));
-  };
+  return (
+    <div className={cn('gem-dropdowndate', className)}>
+      <Dropdown
+        label="Month"
+        theme={theme}
+        value={getMonth(value)}
+        options={monthes}
+        className="gem-dropdowndate-dropdown"
+        onChange={changeMonth}
+        formatter={month => format(setMonth(value, month), 'MMM')}
+      />
+      <Dropdown
+        label="Day"
+        theme={theme}
+        value={getDate(value)}
+        options={range(getDaysInMonth(value))}
+        className="gem-dropdowndate-dropdown"
+        onChange={changeDate}
+        formatter={day => day + 1}
+      />
+      <Dropdown
+        label="Year"
+        theme={theme}
+        value={getYear(value)}
+        options={dates}
+        className="gem-dropdowndate-dropdown"
+        onChange={changeYear}
+      />
+    </div>
+  );
+}
 
-  handleChangeYear = year => {
-    const { onChange, value } = this.props;
-    const fixed = fixDate(value, year, getMonth(value));
-    onChange(setYear(fixed, year));
-  };
+DropdownDate.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.instanceOf(Date),
+  theme: PropTypes.oneOf(['default', 'white']),
+  onChange: PropTypes.func.isRequired,
+};
 
-  render() {
-    const { className, value } = this.props;
-    return (
-      <div className={cn('gem-dateinput', className)}>
-        <DropdownBase
-          value={getMonth(value)}
-          options={monthes}
-          className="gem-dateinput-dropdown"
-          onChange={this.handleChangeMonth}
-          formatter={month => format(setMonth(value, month), 'MMM')}
-        >
-          {({ formatted }) => formatted}
-        </DropdownBase>
-        <DropdownBase
-          value={getDate(value)}
-          options={range(getDaysInMonth(value))}
-          className="gem-dateinput-dropdown"
-          onChange={this.handleChangeDate}
-          formatter={day => day + 1}
-        >
-          {({ formatted }) => formatted}
-        </DropdownBase>
-        <DropdownBase
-          value={getYear(value)}
-          options={dates}
-          className="gem-dateinput-dropdown"
-          onChange={this.handleChangeYear}
-        >
-          {({ formatted }) => formatted}
-        </DropdownBase>
-      </div>
-    );
-  }
-}
+DropdownDate.defaultProps = {
+  className: null,
+  theme: 'default',
+  value: new Date(),
+};

src/components/Input/IconInput.js

@@ -7,4 +7,5 @@ import React, { forwardRef } from 'react';
 import Input from './Input';
-import TooltipIcon from './TooltipIcon';
 import ClipboardButton from '../ClipboardButton';
+import InputIconsContainer from '../common/InputIconsContainer';
+import TooltipIcon from '../common/TooltipIcon';
 
@@ -26,3 +27,3 @@ import './IconInput.styl';
       {children}
-      <div className="gem-iconinput-icons">
+      <InputIconsContainer className="gem-iconinput-icons">
         {copy && (
@@ -40,3 +41,3 @@ <ClipboardButton className="gem-iconinput-copy" value={value}>
         )}
-      </div>
+      </InputIconsContainer>
     </Input>
@@ -43,0 +44,0 @@ );

src/components/Input/index.js

@@ -5,5 +5,4 @@ // @flow
 import Input from './Input';
-import InputLabel from './InputLabel';
 import IconInput from './IconInput';
 
-export { Input, InputLabel, IconInput };
+export { Input, IconInput };

src/components/Input/Input.js

@@ -7,3 +7,3 @@ import React, { forwardRef } from 'react';
 
-import InputLabel from './InputLabel';
+import InputLabel from '../common/InputLabel';
 
@@ -10,0 +10,0 @@ export function Input({

No alert changes

Improved metrics

Total package byte prevSize

204876

increased by1.95%

Number of package files

209

increased by2.96%

Lines of code

3959

increased by1.43%

No dependency changes