Web: Components: fixed moment.js warning and calendar styles

web/ASC.Web.Components/src/components/calendar-new/calendar.stories.js

@@ -1,36 +1,70 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, color, select, date } from '@storybook/addon-knobs/react';
-import withReadme from 'storybook-readme/with-readme';
-import Readme from './README.md';
-import NewCalendar from '.';
-import moment from 'moment';
-import 'moment/min/locales'
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import {
+  withKnobs,
+  boolean,
+  color,
+  select,
+  date
+} from "@storybook/addon-knobs/react";
+import withReadme from "storybook-readme/with-readme";
+import Readme from "./README.md";
+import NewCalendar from ".";
 
 function myDateKnob(name, defaultValue) {
-  const stringTimestamp = date(name, defaultValue)
-  return new Date(stringTimestamp)
+  const stringTimestamp = date(name, defaultValue);
+  return new Date(stringTimestamp);
 }
 
-const locales = moment.locales();
-const arraySize = ['base', 'big'];
+const locales = [
+  "az",
+  "zh-cn",
+  "cs",
+  "nl",
+  "en-gb",
+  "en",
+  "fi",
+  "fr",
+  "de",
+  "de-ch",
+  "el",
+  "it",
+  "ja",
+  "ko",
+  "lv",
+  "pl",
+  "pt",
+  "pt-br",
+  "ru",
+  "sk",
+  "sl",
+  "es",
+  "tr",
+  "uk",
+  "vi"
+];
 
-storiesOf('Components|Calendar', module)
+const arraySize = ["base", "big"];
+
+storiesOf("Components|Calendar", module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
-  .add('base', () => (
-      <NewCalendar
-        onChange={date => {
-          action('Selected date')(date);
-        }}
-        isDisabled={boolean('isDisabled', false)}
-        themeColor={color('themeColor', '#ED7309')}
-        selectedDate={myDateKnob('selectedDate', new Date())}
-        openToDate={myDateKnob('openToDate', new Date())}
-        minDate={myDateKnob('minDate', new Date("1970/01/01"))}
-        maxDate={myDateKnob('maxDate', new Date(new Date().getFullYear() + 1 + "/01/01"))}
-        locale={select('locale', locales, 'en')}
-        size={select('size', arraySize, 'base')}
-      />
+  .add("base", () => (
+    <NewCalendar
+      onChange={date => {
+        action("Selected date")(date);
+      }}
+      isDisabled={boolean("isDisabled", false)}
+      themeColor={color("themeColor", "#ED7309")}
+      selectedDate={myDateKnob("selectedDate", new Date())}
+      openToDate={myDateKnob("openToDate", new Date())}
+      minDate={myDateKnob("minDate", new Date("1970/01/01"))}
+      maxDate={myDateKnob(
+        "maxDate",
+        new Date(new Date().getFullYear() + 1 + "/01/01")
+      )}
+      locale={select("locale", locales, "en")}
+      size={select("size", arraySize, "base")}
+    />
   ));

web/ASC.Web.Components/src/components/calendar-new/index.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import ComboBox from "../combobox";
-import moment from "moment/min/moment-with-locales";
+import moment from "moment";
 import { Weekdays, Days } from "./sub-components";
 import isEmpty from "lodash/isEmpty";
 

web/ASC.Web.Components/src/components/calendar-new/sub-components/day.js

@@ -9,6 +9,7 @@ const StyledDay = styled.div`
   flex-basis: 14.2857%; /*(1/7*100%)*/
   text-align: center;
   line-height: 2.5em !important;
+  user-select: none;
   ${props =>
     props.size === "base" ? "margin-top: 3px;" : "margin-top: 7.5px;"}
 `;

web/ASC.Web.Components/src/components/calendar-new/sub-components/weekday.js

@@ -3,6 +3,7 @@ import styled from "styled-components";
 const Weekday = styled.div`
   overflow: hidden;
   flex-basis: 14.2857%; /*(1/7*100%)*/
+  user-select: none;
 `;
 
 export default Weekday;

web/ASC.Web.Components/src/components/date-picker/date-picker.stories.js

@@ -6,15 +6,39 @@ import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
 import DatePicker from '.';
 import Section from '../../../.storybook/decorators/section';
-import moment from 'moment';
-import 'moment/min/locales'
 
 function myDateKnob(name, defaultValue) {
   const stringTimestamp = date(name, defaultValue)
   return new Date(stringTimestamp)
 }
 
-const locales = moment.locales();
+const locales = [
+  "az",
+  "zh-cn",
+  "cs",
+  "nl",
+  "en-gb",
+  "en",
+  "fi",
+  "fr",
+  "de",
+  "de-ch",
+  "el",
+  "it",
+  "ja",
+  "ko",
+  "lv",
+  "pl",
+  "pt",
+  "pt-br",
+  "ru",
+  "sk",
+  "sl",
+  "es",
+  "tr",
+  "uk",
+  "vi"
+];
 
 storiesOf('Components|DatePicker', module)
   .addDecorator(withKnobs)
@@ -34,7 +58,8 @@ storiesOf('Components|DatePicker', module)
         hasWarning={boolean("hasWarning", false)}
         isOpen={boolean('isOpen', false)}
         themeColor={color('themeColor', '#ED7309')}
-        locale={select('locale', locales, moment.locale())}
+        //locale={select('locale', locales, moment.locale())}
+        locale={select('locale', locales, "en")}
       />
     </Section>
   ));

web/ASC.Web.Components/src/components/date-picker/index.js

@@ -3,14 +3,17 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import InputBlock from "../input-block";
 import DropDown from "../drop-down";
-import { Col } from "reactstrap";
 import NewCalendar from "../calendar-new";
-import moment from "moment/min/moment-with-locales";
+import moment from "moment";
 import { handleAnyClick } from "../../utils/event";
 import isEmpty from "lodash/isEmpty";
 
 const DateInputStyle = styled.div``;
 
+const DropDownStyle = styled.div`
+  position: relative;
+`;
+
 class DatePicker extends Component {
   constructor(props) {
     super(props);
@@ -29,7 +32,8 @@ class DatePicker extends Component {
       isOpen,
       selectedDate: moment(selectedDate).toDate(),
       value: moment(selectedDate).format("L"),
-      mask: this.getMask
+      mask: this.getMask,
+      hasError: this.props.hasError
     };
   }
 
@@ -39,10 +43,6 @@ class DatePicker extends Component {
       this.onIconClick(false);
   };
 
-  onIconClick = isOpen => {
-    this.setState({ isOpen });
-  };
-
   handleChange = e => {
     const value = e.target.value;
     if (this.state.value != value) {
@@ -59,13 +59,24 @@ class DatePicker extends Component {
         //console.log("Mask complete");
         this.props.onChange && this.props.onChange(date);
         newState = Object.assign({}, newState, {
-          selectedDate: date
+          selectedDate: date,
+          hasError: false
+        });
+      } else {
+        newState = Object.assign({}, newState, {
+          hasError: true
         });
       }
       this.setState(newState);
     }
   };
 
+  onIconClick = isOpen => {
+    if (!this.state.hasError) {
+      this.setState({ isOpen });
+    }
+  };
+
   onChange = value => {
     const formatValue = moment(value).format("L");
     this.props.onChange && this.props.onChange(value);
@@ -122,7 +133,7 @@ class DatePicker extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { locale, isOpen, selectedDate } = this.props;
+    const { locale, isOpen, selectedDate, maxDate, minDate } = this.props;
     let newState = {};
 
     if (locale !== prevProps.locale) {
@@ -158,7 +169,6 @@ class DatePicker extends Component {
     const {
       isDisabled,
       isReadOnly,
-      hasError,
       hasWarning,
       minDate,
       maxDate,
@@ -166,7 +176,7 @@ class DatePicker extends Component {
       themeColor
     } = this.props;
 
-    const { value, isOpen, mask, selectedDate } = this.state;
+    const { value, isOpen, mask, selectedDate, hasError } = this.state;
 
     return (
       <DateInputStyle ref={this.ref}>
@@ -179,14 +189,13 @@ class DatePicker extends Component {
           onIconClick={this.onIconClick.bind(this, !isOpen)}
           value={value}
           onChange={this.handleChange}
-          placeholder={moment.localeData().longDateFormat("L")}
           mask={mask}
           keepCharPositions={true}
           //guide={true}
           //showMask={true}
         />
         {isOpen ? (
-          <Col>
+          <DropDownStyle>
             <DropDown opened={isOpen}>
               {
                 <NewCalendar
@@ -201,7 +210,7 @@ class DatePicker extends Component {
                 />
               }
             </DropDown>
-          </Col>
+          </DropDownStyle>
         ) : null}
       </DateInputStyle>
     );