hippo-fw 0.9.6 → 0.9.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/client/hippo/components/asset.jsx +22 -2
- data/client/hippo/components/asset.scss +1 -1
- data/client/hippo/components/data-list.jsx +38 -27
- data/client/hippo/components/data-list/data-list.scss +2 -0
- data/client/hippo/components/data-table.jsx +4 -2
- data/client/hippo/components/data-table/formatters.js +7 -0
- data/client/hippo/components/data-table/table-styles.scss +10 -0
- data/client/hippo/components/date-time.jsx +93 -133
- data/client/hippo/components/date-time.scss +1 -36
- data/client/hippo/components/form/api.js +4 -3
- data/client/hippo/components/form/fields.jsx +7 -1
- data/client/hippo/components/form/fields/date-wrapper.jsx +4 -4
- data/client/hippo/components/icon.jsx +10 -1
- data/client/hippo/components/query-builder.jsx +6 -1
- data/client/hippo/components/record-finder/query-layer.jsx +1 -1
- data/client/hippo/components/save-button.jsx +55 -0
- data/client/hippo/components/text-editor.jsx +10 -9
- data/client/hippo/components/text-editor/text-editor.scss +0 -1
- data/client/hippo/components/time-zone-select.jsx +60 -0
- data/client/hippo/models/asset.js +10 -5
- data/client/hippo/models/base.js +1 -1
- data/client/hippo/models/pub_sub.js +22 -67
- data/client/hippo/models/pub_sub/channel.js +28 -8
- data/client/hippo/models/pub_sub/map.js +57 -0
- data/client/hippo/models/query/array-result.js +5 -4
- data/client/hippo/models/query/field.js +19 -3
- data/client/hippo/models/system-setting.js +16 -1
- data/client/hippo/models/tenant.js +8 -7
- data/client/hippo/screens/system-settings.jsx +10 -12
- data/client/hippo/screens/user-management/edit-form.jsx +10 -11
- data/client/hippo/workspace/index.jsx +6 -3
- data/client/hippo/workspace/menu-option.jsx +2 -5
- data/client/hippo/workspace/menu.jsx +13 -1
- data/client/hippo/workspace/styles.scss +11 -26
- data/command-reference-files/initial/Gemfile +1 -1
- data/command-reference-files/model/client/appy-app/models/test_test.js +1 -1
- data/command-reference-files/model/spec/server/models/test_test_spec.rb +10 -0
- data/lib/hippo/api/cable.rb +0 -2
- data/lib/hippo/command/generate_model.rb +2 -3
- data/lib/hippo/spec_helper.rb +4 -2
- data/lib/hippo/tenant.rb +7 -1
- data/lib/hippo/version.rb +1 -1
- data/package-lock.json +60 -46
- data/package.json +5 -2
- data/spec/client/components/__snapshots__/record-finder.spec.jsx.snap +1 -0
- data/spec/client/components/__snapshots__/time-zone-select.spec.jsx.snap +48 -0
- data/spec/client/components/form.spec.jsx +7 -0
- data/spec/client/components/time-zone-select.spec.jsx +11 -0
- data/spec/client/models/pub_sub.spec.js +1 -3
- data/spec/client/models/pub_sub/channel.spec.js +45 -0
- data/spec/client/models/system-setting.spec.js +14 -0
- data/spec/client/workspace/__snapshots__/menu.spec.jsx.snap +9 -9
- data/spec/server/api/tenant_change_spec.rb +1 -1
- data/templates/client/models/model.js +1 -1
- data/templates/spec/factories/model.rb +6 -0
- data/templates/spec/server/model_spec.rb +4 -4
- data/views/hippo_root_view.erb +4 -0
- metadata +11 -10
- data/client/hippo/components/date-time/calendar.jsx +0 -113
- data/client/hippo/components/date-time/date-time-drop.jsx +0 -75
- data/client/hippo/components/date-time/date-time.scss +0 -157
- data/client/hippo/components/date-time/time.jsx +0 -119
- data/client/hippo/workspace/foo.js +0 -0
- data/command-reference-files/model/spec/fixtures/appy-app/test_test.yml +0 -11
- data/command-reference-files/model/spec/server/test_test_spec.rb +0 -10
- data/spec/client/components/date-time.spec.jsx +0 -20
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import SystemSettings from 'hippo/models/system-setting';
|
|
2
2
|
import Asset from 'hippo/models/asset';
|
|
3
|
+
import Config from 'hippo/config';
|
|
4
|
+
|
|
5
|
+
jest.mock('hippo/config');
|
|
3
6
|
|
|
4
7
|
const TEST_SETTINGS = {
|
|
5
8
|
id: 1,
|
|
@@ -16,4 +19,15 @@ describe('SystemSettings Model', () => {
|
|
|
16
19
|
ss.logo = { };
|
|
17
20
|
expect(ss.logo).toBeInstanceOf(Asset);
|
|
18
21
|
});
|
|
22
|
+
|
|
23
|
+
it('sets Config logo when updated', () => {
|
|
24
|
+
const ss = new SystemSettings(TEST_SETTINGS);
|
|
25
|
+
ss.logo = TEST_SETTINGS.logo;
|
|
26
|
+
ss.logo.file = { mockData: true };
|
|
27
|
+
expect(ss.logo.isDirty).toEqual(true);
|
|
28
|
+
ss.syncData = { foo: 'bar' };
|
|
29
|
+
ss.logo.file = null;
|
|
30
|
+
expect(Config.logo).toEqual(ss.logo.file_data);
|
|
31
|
+
expect(ss.syncData).toMatchObject({ settings: TEST_SETTINGS.settings });
|
|
32
|
+
});
|
|
19
33
|
});
|
|
@@ -31,7 +31,7 @@ exports[`Workspace Menu has groups with screens 1`] = `
|
|
|
31
31
|
Settings
|
|
32
32
|
<span
|
|
33
33
|
aria-hidden={true}
|
|
34
|
-
className="fa fa-wrench"
|
|
34
|
+
className="fa fa-wrench icon"
|
|
35
35
|
/>
|
|
36
36
|
</h4>
|
|
37
37
|
</header>
|
|
@@ -42,11 +42,11 @@ exports[`Workspace Menu has groups with screens 1`] = `
|
|
|
42
42
|
href={undefined}
|
|
43
43
|
onClick={[Function]}
|
|
44
44
|
>
|
|
45
|
-
User Management
|
|
46
45
|
<span
|
|
47
46
|
aria-hidden={true}
|
|
48
|
-
className="fa fa-group"
|
|
47
|
+
className="fa fa-group icon"
|
|
49
48
|
/>
|
|
49
|
+
User Management
|
|
50
50
|
</a>
|
|
51
51
|
<a
|
|
52
52
|
aria-label={undefined}
|
|
@@ -54,11 +54,11 @@ exports[`Workspace Menu has groups with screens 1`] = `
|
|
|
54
54
|
href={undefined}
|
|
55
55
|
onClick={[Function]}
|
|
56
56
|
>
|
|
57
|
-
System Settings
|
|
58
57
|
<span
|
|
59
58
|
aria-hidden={true}
|
|
60
|
-
className="fa fa-cogs"
|
|
59
|
+
className="fa fa-cogs icon"
|
|
61
60
|
/>
|
|
61
|
+
System Settings
|
|
62
62
|
</a>
|
|
63
63
|
<a
|
|
64
64
|
aria-label={undefined}
|
|
@@ -66,11 +66,11 @@ exports[`Workspace Menu has groups with screens 1`] = `
|
|
|
66
66
|
href={undefined}
|
|
67
67
|
onClick={[Function]}
|
|
68
68
|
>
|
|
69
|
-
title
|
|
70
69
|
<span
|
|
71
70
|
aria-hidden={true}
|
|
72
|
-
className="fa fa-red"
|
|
71
|
+
className="fa fa-red icon"
|
|
73
72
|
/>
|
|
73
|
+
title
|
|
74
74
|
</a>
|
|
75
75
|
</nav>
|
|
76
76
|
`;
|
|
@@ -82,10 +82,10 @@ exports[`Workspace Menu has renders menu options 1`] = `
|
|
|
82
82
|
href={undefined}
|
|
83
83
|
onClick={[Function]}
|
|
84
84
|
>
|
|
85
|
-
title
|
|
86
85
|
<span
|
|
87
86
|
aria-hidden={true}
|
|
88
|
-
className="fa fa-red"
|
|
87
|
+
className="fa fa-red icon"
|
|
89
88
|
/>
|
|
89
|
+
title
|
|
90
90
|
</a>
|
|
91
91
|
`;
|
|
@@ -16,7 +16,7 @@ describe "Tenant changes", api: true, vcr: VCR_OPTS do
|
|
|
16
16
|
'SERVER_NAME' => "#{tenant.slug}.example.ua",
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
expect(tenant.reload.slug).to eq('
|
|
19
|
+
expect(tenant.reload.slug).to eq('red')
|
|
20
20
|
email = Mail::TestMailer.deliveries.last
|
|
21
21
|
expect(email).not_to be_nil
|
|
22
22
|
expect(email.body).to include(tenant.domain)
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
require_relative 'spec_helper'
|
|
1
|
+
require_relative '../spec_helper'
|
|
2
2
|
|
|
3
|
-
describe <%=
|
|
3
|
+
describe <%= namespace %>::<%= class_name %> do
|
|
4
4
|
|
|
5
5
|
it "can be instantiated" do
|
|
6
|
-
model = <%=
|
|
7
|
-
expect(
|
|
6
|
+
model = <%= namespace %>::<%= class_name %>.new
|
|
7
|
+
expect(model).to be_an(<%= namespace %>::<%= class_name %>)
|
|
8
8
|
end
|
|
9
9
|
|
|
10
10
|
end
|
data/views/hippo_root_view.erb
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
7
|
+
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
|
|
8
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
9
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
6
10
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
|
|
7
11
|
<title><%= Hippo::Extensions.controlling.title %></title>
|
|
8
12
|
<style>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: hippo-fw
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.9.
|
|
4
|
+
version: 0.9.7
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Nathan Stitt
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-
|
|
11
|
+
date: 2017-09-09 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: activejob
|
|
@@ -702,14 +702,11 @@ files:
|
|
|
702
702
|
- client/hippo/components/data-list.jsx
|
|
703
703
|
- client/hippo/components/data-list/data-list.scss
|
|
704
704
|
- client/hippo/components/data-table.jsx
|
|
705
|
+
- client/hippo/components/data-table/formatters.js
|
|
705
706
|
- client/hippo/components/data-table/header-cell.jsx
|
|
706
707
|
- client/hippo/components/data-table/table-styles.scss
|
|
707
708
|
- client/hippo/components/date-time.jsx
|
|
708
709
|
- client/hippo/components/date-time.scss
|
|
709
|
-
- client/hippo/components/date-time/calendar.jsx
|
|
710
|
-
- client/hippo/components/date-time/date-time-drop.jsx
|
|
711
|
-
- client/hippo/components/date-time/date-time.scss
|
|
712
|
-
- client/hippo/components/date-time/time.jsx
|
|
713
710
|
- client/hippo/components/enabled.js.erb
|
|
714
711
|
- client/hippo/components/field-validation.js
|
|
715
712
|
- client/hippo/components/form.jsx
|
|
@@ -742,6 +739,7 @@ files:
|
|
|
742
739
|
- client/hippo/components/record-finder/query-layer.jsx
|
|
743
740
|
- client/hippo/components/record-finder/record-finder.scss
|
|
744
741
|
- client/hippo/components/request-spinner/index.js
|
|
742
|
+
- client/hippo/components/save-button.jsx
|
|
745
743
|
- client/hippo/components/screen.jsx
|
|
746
744
|
- client/hippo/components/select-field/index.js
|
|
747
745
|
- client/hippo/components/select-field/styles.scss
|
|
@@ -764,6 +762,7 @@ files:
|
|
|
764
762
|
- client/hippo/components/text-editor/plugins.js
|
|
765
763
|
- client/hippo/components/text-editor/renderer.jsx
|
|
766
764
|
- client/hippo/components/text-editor/text-editor.scss
|
|
765
|
+
- client/hippo/components/time-zone-select.jsx
|
|
767
766
|
- client/hippo/components/tool-tip.jsx
|
|
768
767
|
- client/hippo/components/toolbar/changes-notification.scss
|
|
769
768
|
- client/hippo/components/toolbar/index.js
|
|
@@ -799,6 +798,7 @@ files:
|
|
|
799
798
|
- client/hippo/models/index.js
|
|
800
799
|
- client/hippo/models/pub_sub.js
|
|
801
800
|
- client/hippo/models/pub_sub/channel.js
|
|
801
|
+
- client/hippo/models/pub_sub/map.js
|
|
802
802
|
- client/hippo/models/query.js
|
|
803
803
|
- client/hippo/models/query/array-result.js
|
|
804
804
|
- client/hippo/models/query/clause.js
|
|
@@ -855,7 +855,6 @@ files:
|
|
|
855
855
|
- client/hippo/testing/screens.js
|
|
856
856
|
- client/hippo/testing/utils.js
|
|
857
857
|
- client/hippo/user.js
|
|
858
|
-
- client/hippo/workspace/foo.js
|
|
859
858
|
- client/hippo/workspace/index.jsx
|
|
860
859
|
- client/hippo/workspace/menu-group.jsx
|
|
861
860
|
- client/hippo/workspace/menu-option.jsx
|
|
@@ -913,8 +912,7 @@ files:
|
|
|
913
912
|
- command-reference-files/model/lib/appy-app/model.rb
|
|
914
913
|
- command-reference-files/model/lib/appy-app/models/test_test.rb
|
|
915
914
|
- command-reference-files/model/spec/client/models/test_test.spec.js
|
|
916
|
-
- command-reference-files/model/spec/
|
|
917
|
-
- command-reference-files/model/spec/server/test_test_spec.rb
|
|
915
|
+
- command-reference-files/model/spec/server/models/test_test_spec.rb
|
|
918
916
|
- command-reference-files/screen/client/appy-app/screens/ready-set-go.jsx
|
|
919
917
|
- command-reference-files/screen/config/screens.rb
|
|
920
918
|
- command-reference-files/screen/spec/client/screens/ready-set-go.spec.jsx
|
|
@@ -1071,21 +1069,23 @@ files:
|
|
|
1071
1069
|
- spec/client/components/__snapshots__/network-activity-overlay.spec.jsx.snap
|
|
1072
1070
|
- spec/client/components/__snapshots__/query-builder.spec.jsx.snap
|
|
1073
1071
|
- spec/client/components/__snapshots__/record-finder.spec.jsx.snap
|
|
1072
|
+
- spec/client/components/__snapshots__/time-zone-select.spec.jsx.snap
|
|
1074
1073
|
- spec/client/components/asset.spec.jsx
|
|
1075
1074
|
- spec/client/components/data-list.spec.jsx
|
|
1076
1075
|
- spec/client/components/data-table.spec.jsx
|
|
1077
|
-
- spec/client/components/date-time.spec.jsx
|
|
1078
1076
|
- spec/client/components/form.spec.jsx
|
|
1079
1077
|
- spec/client/components/master-detail.spec.jsx
|
|
1080
1078
|
- spec/client/components/network-activity-overlay.spec.jsx
|
|
1081
1079
|
- spec/client/components/query-builder.spec.jsx
|
|
1082
1080
|
- spec/client/components/record-finder.spec.jsx
|
|
1081
|
+
- spec/client/components/time-zone-select.spec.jsx
|
|
1083
1082
|
- spec/client/extension/base.spec.js
|
|
1084
1083
|
- spec/client/lib/util.spec.js
|
|
1085
1084
|
- spec/client/models/asset.spec.js
|
|
1086
1085
|
- spec/client/models/base.spec.js
|
|
1087
1086
|
- spec/client/models/collection.spec.js
|
|
1088
1087
|
- spec/client/models/pub_sub.spec.js
|
|
1088
|
+
- spec/client/models/pub_sub/channel.spec.js
|
|
1089
1089
|
- spec/client/models/query.spec.js
|
|
1090
1090
|
- spec/client/models/sync.spec.js
|
|
1091
1091
|
- spec/client/models/system-setting.spec.js
|
|
@@ -1193,6 +1193,7 @@ files:
|
|
|
1193
1193
|
- templates/spec/client/models/model.spec.js
|
|
1194
1194
|
- templates/spec/client/screen.spec.jsx
|
|
1195
1195
|
- templates/spec/client/setup.js
|
|
1196
|
+
- templates/spec/factories/model.rb
|
|
1196
1197
|
- templates/spec/fixtures/namespace/model.yml
|
|
1197
1198
|
- templates/spec/server/model_spec.rb
|
|
1198
1199
|
- templates/spec/server/spec_helper.rb
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import { observer } from 'mobx-react';
|
|
4
|
-
import { action } from 'mobx';
|
|
5
|
-
import cx from 'classnames';
|
|
6
|
-
import range from 'lodash/range';
|
|
7
|
-
import chunk from 'lodash/chunk';
|
|
8
|
-
import Header from 'grommet/components/Header';
|
|
9
|
-
import Button from 'grommet/components/Button';
|
|
10
|
-
import Title from 'grommet/components/Title';
|
|
11
|
-
import LinkPreviousIcon from 'grommet/components/icons/base/LinkPrevious';
|
|
12
|
-
import LinkNextIcon from 'grommet/components/icons/base/LinkNext';
|
|
13
|
-
|
|
14
|
-
const Day = ({ i, w, d, className, ...props }) => {
|
|
15
|
-
const prevMonth = 0 === w && i > 7;
|
|
16
|
-
const nextMonth = w >= 4 && i <= 14;
|
|
17
|
-
const cls = cx(className, {
|
|
18
|
-
'prev-month': prevMonth,
|
|
19
|
-
'next-month': nextMonth,
|
|
20
|
-
'current-day': !prevMonth && !nextMonth && i === d,
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
return <td className={cls} {...props}>{i}</td>;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
@observer
|
|
28
|
-
export default class Calendar extends React.PureComponent {
|
|
29
|
-
static propTypes = {
|
|
30
|
-
moment: PropTypes.object.isRequired,
|
|
31
|
-
onChange: PropTypes.func.isRequired,
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@action.bound
|
|
35
|
-
selectDate(i, w) {
|
|
36
|
-
const prevMonth = 0 === w && i > 7;
|
|
37
|
-
const nextMonth = w >= 4 && i <= 14;
|
|
38
|
-
const m = this.props.moment;
|
|
39
|
-
|
|
40
|
-
m.date(i);
|
|
41
|
-
if (prevMonth) m.subtract(1, 'month');
|
|
42
|
-
if (nextMonth) m.add(1, 'month');
|
|
43
|
-
this.props.onChange(m);
|
|
44
|
-
this.forceUpdate();
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@action.bound
|
|
48
|
-
prevMonth(e) {
|
|
49
|
-
e.preventDefault();
|
|
50
|
-
this.props.onChange(this.props.moment.subtract(1, 'month'));
|
|
51
|
-
this.forceUpdate();
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@action.bound
|
|
55
|
-
nextMonth(e) {
|
|
56
|
-
e.preventDefault();
|
|
57
|
-
this.props.onChange(this.props.moment.add(1, 'month'));
|
|
58
|
-
this.forceUpdate();
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
render() {
|
|
62
|
-
const m = this.props.moment;
|
|
63
|
-
const d = m.date();
|
|
64
|
-
const d1 = m.clone().subtract(1, 'month').endOf('month').date();
|
|
65
|
-
const d2 = m.clone().date(1).day();
|
|
66
|
-
const d3 = m.clone().endOf('month').date();
|
|
67
|
-
const days = [].concat(
|
|
68
|
-
range((d1 - d2) + 1, d1 + 1),
|
|
69
|
-
range(1, d3 + 1),
|
|
70
|
-
range(1, ((42 - d3) - d2) + 1),
|
|
71
|
-
);
|
|
72
|
-
const weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
73
|
-
|
|
74
|
-
return (
|
|
75
|
-
<div className={cx('calendar', this.props.className)}>
|
|
76
|
-
|
|
77
|
-
<Header key='header' justify='between'>
|
|
78
|
-
<Button className="previous" icon={<LinkPreviousIcon />} onClick={this.prevMonth} />
|
|
79
|
-
<Title className="title" responsive={false}>
|
|
80
|
-
{m.format('MMMM YYYY')}
|
|
81
|
-
</Title>
|
|
82
|
-
<Button className="next" icon={<LinkNextIcon />} onClick={this.nextMonth} />
|
|
83
|
-
</Header>
|
|
84
|
-
|
|
85
|
-
<div className="grid">
|
|
86
|
-
<table>
|
|
87
|
-
<thead>
|
|
88
|
-
<tr>
|
|
89
|
-
{weeks.map((w, i) => <td key={i}>{w}</td>)}
|
|
90
|
-
</tr>
|
|
91
|
-
</thead>
|
|
92
|
-
|
|
93
|
-
<tbody>
|
|
94
|
-
{chunk(days, 7).map((row, w) =>
|
|
95
|
-
<tr key={w}>
|
|
96
|
-
{row.map(i =>
|
|
97
|
-
<Day
|
|
98
|
-
key={i}
|
|
99
|
-
i={i}
|
|
100
|
-
d={d}
|
|
101
|
-
w={w}
|
|
102
|
-
onClick={() => this.selectDate(i, w)}
|
|
103
|
-
/>,
|
|
104
|
-
)}
|
|
105
|
-
</tr>,
|
|
106
|
-
)}
|
|
107
|
-
</tbody>
|
|
108
|
-
</table>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
);
|
|
112
|
-
}
|
|
113
|
-
}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import { action, observable } from 'mobx';
|
|
4
|
-
import { observer } from 'mobx-react';
|
|
5
|
-
import CSSClassnames from 'grommet/utils/CSSClassnames';
|
|
6
|
-
import CalendarIcon from 'grommet/components/icons/base/Calendar';
|
|
7
|
-
import ClockIcon from 'grommet/components/icons/base/Clock';
|
|
8
|
-
import Box from 'grommet/components/Box';
|
|
9
|
-
import cn from 'classnames';
|
|
10
|
-
|
|
11
|
-
import Calendar from './calendar';
|
|
12
|
-
import Time from './time';
|
|
13
|
-
|
|
14
|
-
const FORM_FIELD = CSSClassnames.FORM_FIELD;
|
|
15
|
-
const CLASS_ROOT = 'date-time';
|
|
16
|
-
|
|
17
|
-
@observer
|
|
18
|
-
export default class DateTimeDrop extends React.Component {
|
|
19
|
-
static propTypes = {
|
|
20
|
-
value: PropTypes.object.isRequired,
|
|
21
|
-
onChange: PropTypes.func.isRequired,
|
|
22
|
-
minuteStep: PropTypes.number,
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
static className = 'date-time-drop';
|
|
26
|
-
|
|
27
|
-
@observable isShowingTime = false;
|
|
28
|
-
|
|
29
|
-
@action.bound
|
|
30
|
-
toggleTabs() {
|
|
31
|
-
this.isShowingTime = !this.isShowingTime;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
render() {
|
|
35
|
-
return (
|
|
36
|
-
<Box
|
|
37
|
-
className={`${this.constructor.className} component date-time-drop`}
|
|
38
|
-
>
|
|
39
|
-
<Box
|
|
40
|
-
direction='row'
|
|
41
|
-
className="tabs"
|
|
42
|
-
>
|
|
43
|
-
<Box
|
|
44
|
-
onClick={this.isShowingTime ? this.toggleTabs : null}
|
|
45
|
-
colorIndex={this.isShowingTime ? '' : 'neutral-1'}
|
|
46
|
-
align="center" justify="center" flex direction='row' className="calendar"
|
|
47
|
-
>
|
|
48
|
-
<CalendarIcon />
|
|
49
|
-
Day
|
|
50
|
-
</Box>
|
|
51
|
-
<Box
|
|
52
|
-
onClick={this.isShowingTime ? null : this.toggleTabs}
|
|
53
|
-
colorIndex={this.isShowingTime ? 'neutral-1' : ''}
|
|
54
|
-
align="center" justify="center" flex direction='row' className="time"
|
|
55
|
-
>
|
|
56
|
-
<ClockIcon />
|
|
57
|
-
Time
|
|
58
|
-
</Box>
|
|
59
|
-
</Box>
|
|
60
|
-
<div className={cn('tab', { active: !this.isShowingTime })}>
|
|
61
|
-
<Calendar
|
|
62
|
-
moment={this.props.value}
|
|
63
|
-
onChange={this.props.onChange}
|
|
64
|
-
/>
|
|
65
|
-
</div>
|
|
66
|
-
<div className={cn('tab', { active: this.isShowingTime })}>
|
|
67
|
-
<Time
|
|
68
|
-
moment={this.props.value}
|
|
69
|
-
onChange={this.props.onChange}
|
|
70
|
-
/>
|
|
71
|
-
</div>
|
|
72
|
-
</Box>
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
@import '../../styles/global';
|
|
2
|
-
|
|
3
|
-
.date-time-drop {
|
|
4
|
-
$slider-handle-size: 20px;
|
|
5
|
-
$slider-size: 4px;
|
|
6
|
-
$slider-fix: 20px;
|
|
7
|
-
.calendar {
|
|
8
|
-
header {
|
|
9
|
-
min-height: 50px;
|
|
10
|
-
}
|
|
11
|
-
.grid {
|
|
12
|
-
width: 100%;
|
|
13
|
-
padding: 12px;
|
|
14
|
-
}
|
|
15
|
-
table {
|
|
16
|
-
width: 100%;
|
|
17
|
-
border-collapse: collapse;
|
|
18
|
-
border-spacing: 0;
|
|
19
|
-
}
|
|
20
|
-
td {
|
|
21
|
-
padding: 8px 0;
|
|
22
|
-
text-align: center;
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
}
|
|
25
|
-
thead {
|
|
26
|
-
td {
|
|
27
|
-
color: $secondary-text-color;
|
|
28
|
-
font-weight: normal;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
tbody td {
|
|
32
|
-
color: #666666;
|
|
33
|
-
|
|
34
|
-
&:hover {
|
|
35
|
-
background-color: $hover-background-color;
|
|
36
|
-
color: $hover-text-color;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
.current-day {
|
|
40
|
-
background-color: $brand-color;
|
|
41
|
-
color: $colored-text-color;
|
|
42
|
-
font-weight: 700;
|
|
43
|
-
}
|
|
44
|
-
.prev-month,
|
|
45
|
-
.next-month {
|
|
46
|
-
color: #999999;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
.time-picker {
|
|
52
|
-
color: $background-color;
|
|
53
|
-
padding-top: 50px;
|
|
54
|
-
|
|
55
|
-
.showtime {
|
|
56
|
-
text-align: center;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.am-pm {
|
|
60
|
-
display: flex;
|
|
61
|
-
flex-direction: column;
|
|
62
|
-
margin-left: 10px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.separater {
|
|
66
|
-
display: inline-block;
|
|
67
|
-
font-size: 32px;
|
|
68
|
-
font-weight: bold;
|
|
69
|
-
color: $inverse-background-color;
|
|
70
|
-
width: 32px;
|
|
71
|
-
height: 65px;
|
|
72
|
-
line-height: 65px;
|
|
73
|
-
text-align: center;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.time-text {
|
|
77
|
-
position: relative;
|
|
78
|
-
left: -10px;
|
|
79
|
-
font-size: 15px;
|
|
80
|
-
color: $inverse-background-color;
|
|
81
|
-
margin-top: 7px;
|
|
82
|
-
margin-bottom: 10px;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.sliders {
|
|
86
|
-
padding: 40px;
|
|
87
|
-
max-width: 500px;
|
|
88
|
-
margin: auto;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.minutes,
|
|
92
|
-
.hour {
|
|
93
|
-
width: 65px;
|
|
94
|
-
height: 65px;
|
|
95
|
-
padding: 0;
|
|
96
|
-
font-size: 38px;
|
|
97
|
-
background-color: $inverse-background-color;
|
|
98
|
-
border-radius: 3px;
|
|
99
|
-
text-align: center;
|
|
100
|
-
&:focus {
|
|
101
|
-
padding: 0;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
.u-slider-time {
|
|
108
|
-
position: relative;
|
|
109
|
-
display: inline-block;
|
|
110
|
-
background-color: $control-background-color;
|
|
111
|
-
border-radius: 3px;
|
|
112
|
-
height: $slider-size;
|
|
113
|
-
width: 100%;
|
|
114
|
-
cursor: pointer;
|
|
115
|
-
|
|
116
|
-
.value {
|
|
117
|
-
position: absolute;
|
|
118
|
-
background-color: $brand-color;
|
|
119
|
-
border-radius: 3px;
|
|
120
|
-
top: 0;
|
|
121
|
-
height: 100%;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.handle {
|
|
125
|
-
position: absolute;
|
|
126
|
-
width: $slider-size;
|
|
127
|
-
height: $slider-size;
|
|
128
|
-
|
|
129
|
-
&:after {
|
|
130
|
-
position: relative;
|
|
131
|
-
display: block;
|
|
132
|
-
content: '';
|
|
133
|
-
top: -$slider-fix/2 - 2;
|
|
134
|
-
left: -($slider-size+$slider-fix)/2;
|
|
135
|
-
width: $slider-size + $slider-fix;
|
|
136
|
-
height: $slider-size + $slider-fix;
|
|
137
|
-
background-color: #fff;
|
|
138
|
-
border: 3px solid $brand-color; //inverse-background-color;
|
|
139
|
-
border-radius: 50%;
|
|
140
|
-
cursor: pointer;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.tab {
|
|
146
|
-
display: none;
|
|
147
|
-
&.active { display: block; }
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.tabs {
|
|
151
|
-
> * { padding: 0.5rem; }
|
|
152
|
-
margin-bottom: 10px;
|
|
153
|
-
border-bottom: 1px solid;
|
|
154
|
-
.grommetux-control-icon { margin-right: 0.5rem; }
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
}
|