forstok-ui-lib 5.4.9 → 5.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.4.9",
+  "version": "5.6.1",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -44,7 +44,6 @@
     "moment": "^2.30.1",
     "moment-range": "^4.0.2",
     "npm-force-resolutions": "^0.0.10",
-    "rc-calendar": "^9.15.11",
     "react": "^19.0.0",
     "react-content-loader": "^7.0.2",
     "react-datepicker": "^8.0.0",

package/rollup.config.js

@@ -65,7 +65,7 @@ export default [
         exclude: 'node_modules/**'
       })
     ],
-    external: ['react', 'react-dom', 'styled-components', 'rc-calendar/src/RangeCalendar', 'rc-calendar/src/Picker'],
+    external: ['react', 'react-dom', 'styled-components'],
   },
   {
     input: 'src/index.ts',

package/src/assets/images/icons/arrow-download.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 41.712 41.712" style="enable-background:new 0 0 41.712 41.712;" xml:space="preserve">
+<path style="fill:#000000;" d="M31.586,21.8c0.444-0.444,0.444-1.143,0-1.587c-0.429-0.444-1.143-0.444-1.571,0l-8.047,8.032V1.706
+	c0-0.619-0.492-1.127-1.111-1.127c-0.619,0-1.127,0.508-1.127,1.127v26.539l-8.031-8.032c-0.444-0.444-1.159-0.444-1.587,0
+	c-0.444,0.444-0.444,1.143,0,1.587l9.952,9.952c0.429,0.429,1.143,0.429,1.587,0L31.586,21.8z M39.474,29.086
+	c0-0.619,0.492-1.111,1.111-1.111c0.619,0,1.127,0.492,1.127,1.111v10.92c0,0.619-0.508,1.127-1.127,1.127H1.111
+	C0.492,41.133,0,40.625,0,40.006v-10.92c0-0.619,0.492-1.111,1.111-1.111s1.127,0.492,1.127,1.111v9.809h37.236V29.086z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/images/icons/arrow-white-upload.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
+  <g>
+    <g fill="#1D1D1B">
+      <path d="m63.824,41.771c0-1.341-1.086-2.428-2.427-2.428-1.342,0-2.428,1.087-2.428,2.428v14.07h-54.014v-14.07c1.77636e-15-1.341-1.085-2.428-2.428-2.428-1.341,0-2.427,1.087-2.427,2.428v15.486c0,0.179 0.065,0.337 0.103,0.505-0.037,0.168-0.103,0.326-0.103,0.506 0,1.34 1.086,2.427 2.427,2.427h58.87c1.341,0 2.427-1.087 2.427-2.427 0-0.18-0.063-0.338-0.103-0.506 0.039-0.168 0.103-0.327 0.103-0.505v-15.486z" fill="#FFFFFF"/>
+      <path d="m32.114,49.306c1.341,0 2.428-1.087 2.428-2.427v-35.464l10.573,10.573c0.474,0.474 1.096,0.712 1.717,0.712 0.62,0 1.242-0.238 1.715-0.712 0.95-0.948 0.95-2.484 0-3.432l-14.717-14.717c-0.947-0.95-2.483-0.95-3.432-4.44089e-16l-14.717,14.717c-0.947,0.948-0.947,2.484 0,3.432 0.474,0.474 1.096,0.712 1.717,0.712s1.242-0.238 1.716-0.712l10.573-10.573v35.464c0,1.34 1.085,2.427 2.427,2.427z" fill="#FFFFFF"/>
+    </g>
+  </g>
+</svg>

package/src/components/button/styles.ts

@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components';
+import IconArrowDownload from '../../assets/images/icons/arrow-download.svg';
+import IconArrowUpload from '../../assets/images/icons/arrow-white-upload.svg';
 import IconDotted from '../../assets/images/icons/dotted.svg';
 import IconClose from '../../assets/images/icons/close.svg';
 import IconCloseWhite from '../../assets/images/icons/close-white.svg';
@@ -178,7 +180,30 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
   }
   if ($iconLeft) {
     style += ` padding-left: 35px; `
-    if ($iconLeft === 'filter') {
+    if ($iconLeft === 'export') {
+      style += `
+        &:before { 
+          content: url(${IconArrowDownload}); 
+          position: absolute;
+          left: 12px;
+          top: 7px;
+          width: 14px;
+          ${IconStyles}
+        }
+      `
+    } else if ($iconLeft === 'import') {
+      style += `
+        &:before { 
+          content: url(${IconArrowUpload}); 
+          position: absolute;
+          left: 50%;
+          top: 8px;
+          width: 1rem;
+          margin-left: -8px;
+          ${IconStyles}
+        }
+      `
+    } else if ($iconLeft === 'filter') {
       style += `
         &:before { 
           content: url(${IconFilter}); 

package/src/components/index.ts

@@ -26,7 +26,6 @@ export { default as RadioComponent } from './radio';
 export { default as SwitchComponent } from './switch';
 export { default as MasterTableComponent } from './masterTable';
 export { default as ListComponent } from './list';
-export { default as AntCalendarComponent } from './cascader/calendar';
 
 export * from './dropdown/typed';
 export * from './message/typed';

package/src/components/cascader/calendar.tsx

@@ -1,57 +0,0 @@
-import moment, { Moment } from 'moment';
-import Picker from 'rc-calendar/src/Picker';
-import RangeCalendar from 'rc-calendar/src/RangeCalendar';
-import './rc-calendar.css';
-import { useState } from 'react';
-
-const AntCalendarComponent = () => {
-  const now = moment();
-  const [value, setValue] = useState<any>();
-
-  const onChange = (value: any) => {
-    setValue(value);
-  }
-
-  const formatStr = 'YYYY-MM-DD HH:mm:ss';
-  const format = (v: any) => {
-    return v ? v.format(formatStr) : '';
-  }
-
-  const isValidRange = (v: any) => {
-    return v && v[0] && v[1];
-  }
-
-  const calendar = (
-    <RangeCalendar
-      showWeekNumber={false}
-      dateInputPlaceholder={['start', 'end']}
-      defaultValue={[now, now.clone().add(1, 'months')]}
-      disabledTime={true}
-    />
-  );
-
-  return (
-    <Picker
-        value={value}
-        onChange={onChange}
-        animation="slide-up"
-        calendar={calendar}
-      >
-      {
-        ({ value }: { value: any }) => {
-          return (<span>
-                    <input
-                      placeholder="please select"
-                      style={{ width: 350 }}
-                      readOnly
-                      className="ant-calendar-picker-input ant-input"
-                      value={isValidRange(value) && `${format(value[0])} - ${format(value[1])}` || ''}
-                    />
-                  </span>);
-        }
-      }
-      </Picker>
-  )
-}
-
-export default AntCalendarComponent;