@antscorp/antsomi-ui 1.3.2-beta.18 → 1.3.2-beta.22

package/es/components/molecules/InputNumberWithUnit/index.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { InputNumberProps } from '../InputNumber';
+type TUnit = 'px' | '%' | any;
+/**
+ * @default
+ * ```
+ * const DEFAULT_UNIT = {
+      PX: {
+        value: 'px',
+        label: 'PX',
+      },
+      PERCENT: {
+        value: '%',
+        label: '%',
+      },
+    };
+ * ```
+ */
+interface unitData {
+    [key: string]: {
+        value: string;
+        label: string;
+    };
+}
+interface InputNumberWithUnitProps extends InputNumberProps {
+    unit?: TUnit;
+    unitData?: unitData;
+    onChangeUnit: (unit: TUnit) => void;
+}
+export declare const InputNumberWithUnit: React.FC<InputNumberWithUnitProps>;
+export {};

package/es/components/molecules/InputNumberWithUnit/index.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import React from 'react';
+import { InputNumber } from '../InputNumber';
+import { InputNumberWithUnitWrapper } from './styled';
+// Constants
+const DEFAULT_UNIT = {
+    PX: {
+        value: 'px',
+        label: 'PX',
+    },
+    PERCENT: {
+        value: '%',
+        label: '%',
+    },
+};
+export const InputNumberWithUnit = props => {
+    // Props
+    const { unit, unitData, onChangeUnit } = props, restOf = __rest(props, ["unit", "unitData", "onChangeUnit"]);
+    return (React.createElement(InputNumberWithUnitWrapper, null,
+        React.createElement(InputNumber, Object.assign({}, restOf)),
+        React.createElement("div", { className: "unit-selector" },
+            ' ',
+            Object.values(unitData || DEFAULT_UNIT).map(({ value, label }) => (React.createElement(Text, { key: value, className: `${unit === value ? 'selected' : ''}`, onClick: () => onChangeUnit(value) }, label))))));
+};
+InputNumberWithUnit.defaultProps = {
+    unit: 'px',
+};

package/es/components/molecules/InputNumberWithUnit/styled.d.ts

@@ -0,0 +1 @@
+export declare const InputNumberWithUnitWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/InputNumberWithUnit/styled.js

@@ -0,0 +1,28 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const InputNumberWithUnitWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  margin-right: 10px;
+
+  .unit-selector {
+    display: flex;
+    align-items: center;
+  }
+
+  .unit-selector > div {
+    cursor: pointer;
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon};
+    margin-left: 10px;
+    margin-right: 10px;
+
+    &.selected {
+      color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
+      font-weight: bold;
+    }
+  }
+`;

package/es/components/molecules/index.d.ts

@@ -21,6 +21,7 @@ export { EdgeSetting } from './EdgeSetting';
 export { TreeSelect } from './TreeSelect';
 export { Result } from './Result';
 export { Card } from './Card';
+export { InputNumberWithUnit } from './InputNumberWithUnit';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';

package/es/components/molecules/index.js

@@ -21,3 +21,4 @@ export { EdgeSetting } from './EdgeSetting';
 export { TreeSelect } from './TreeSelect';
 export { Result } from './Result';
 export { Card } from './Card';
+export { InputNumberWithUnit } from './InputNumberWithUnit';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.2-beta.18",
+  "version": "1.3.2-beta.22",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -179,4 +179,4 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   }
-}
+}