forstok-ui-lib 5.2.37 → 5.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.2.37",
+  "version": "5.2.39",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/date/daterange.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import DateRangePicker from 'react-daterange-picker';
-import * as moment from 'moment';
+import moment from 'moment';
 import { extendMoment } from 'moment-range';
 import { configDateRange } from '../../maps/common';
 import IconComponent from '../icon';
@@ -12,7 +12,7 @@ import { dateRangeDays, dateRangeStatus } from '../../assets/javascripts/helper'
 import 'react-daterange-picker/dist/css/react-calendar.css';
 import './styles.css';
 import { DateRangeContainer, DateRangeControl, DateRangeLabelContainer, DateRangeLabel, DateRangeIndicatorsContainer, DateRangeIndicatorsArrowIconSvg, DateRangeMenuContainer, DateRangeMenu, DateRangeSelection, SelectionDate, DateRangeAside, DateRangePortalContainer, DateRangeIconContainer } from './styles';
-import type { TMouseEvent } from '../../typeds';
+import type { TMouseEvent, TState } from '../../typeds';
 import type { TModerateDateFunction } from './typed';
 
 type TDateRange = {
@@ -25,7 +25,7 @@ type TDateRange = {
   evModDate: TModerateDateFunction
   portalId?: string
   isForceUpdate?: boolean
-  setForceUpdate?: React.Dispatch<React.SetStateAction<boolean>>
+  setForceUpdate?: TState<boolean>
   isCheckType?: boolean
   size?: string
 }
@@ -46,7 +46,7 @@ const DateRangeComponent = ({ mode='default', placeholder, startDate, endDate, r
 
   const daterangeContainerRef = useRef<HTMLElement | null>(null);
   const buttonRef = useRef<HTMLDivElement | null>(null);
-  const newMoment = extendMoment(moment);
+  const newMoment = extendMoment(moment as any);
 
   const callback = () => {
     setOpen(false);
@@ -73,7 +73,7 @@ const DateRangeComponent = ({ mode='default', placeholder, startDate, endDate, r
   }
 
   const evToogleDateRangePicker: TMouseEvent = e => {
-    const refEl = (buttonRef && buttonRef.current) ? buttonRef.current :  null;
+    const refEl = (buttonRef && buttonRef.current) ? buttonRef.current : null;
     const buttonEl = refEl && (e.target as HTMLDivElement).closest(`.${refEl.classList[0]}`) as HTMLDivElement;
     if (!buttonEl) {
       return;

package/src/components/datetime/index.tsx

@@ -0,0 +1,22 @@
+import moment from 'moment';
+import { DateTimeContainer } from './styles';
+
+const DateTimeComponent = ({ dateTimeData }:{ dateTimeData: string }) => {
+  const date = moment(dateTimeData, 'YYYY-MM-DD HH:mm:ss ZZ').format('D MMM YYYY,');
+  const time = moment(dateTimeData, 'YYYY-MM-DD HH:mm:ss ZZ').format('hh:mm A');
+
+  return (
+    <DateTimeContainer>
+      {
+        dateTimeData ? (
+          <>
+            <span>{date}</span>
+            <span>{time}</span>
+          </>
+        ) : '-'
+      }
+    </DateTimeContainer>
+  );
+}
+
+export default DateTimeComponent;

package/src/components/datetime/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const DateTimeContainer = styled.div`
+  display: grid;
+`

package/src/components/index.ts

@@ -21,6 +21,7 @@ export { default as UploadDragDropComponent } from './upload/drag_drop';
 export { default as TextAreaComponent } from './textarea';
 export { default as TextAreaRefComponent } from './textarea/ref'; 
 export { default as DateRangeComponent } from './date/daterange';
+export { default as DateTimeComponent } from './datetime';
 
 export * from './dropdown/typed';
 export * from './message/typed';