Skip to content
Permalink
Browse files

feat(progress): use send local ui state instead of operate dom

  • Loading branch information...
yyc-git committed May 28, 2019
1 parent ebe75c0 commit 7912f99092606e6df83471afd9abd353fd901bd8
@@ -5,16 +5,71 @@ open Wonderjs;
open EventType;

type action =
| ChangePercent(int);
| ChangePercent(int)
| Show
| Hide;

type state = {
percent: int,
style: ReactDOMRe.Style.t,
visibleStyle: ReactDOMRe.Style.t,
};

module Method = {
let buildWidthPercentStr = percent => (percent |> string_of_int) ++ "%";

let didMount = send => {
let engineState = StateEngineService.unsafeGetState();

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=
ProgressUtils.getProgressChangePercentCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
send(
ChangePercent(
event.userData
|> OptionService.unsafeGet
|> WonderEditor.EventType.convertUserDataToInt,
),
);

(engineState, event);
},
~state=engineState,
(),
);

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressShowCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
send(Show);

(engineState, event);
},
~state=engineState,
(),
);

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressHideCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
send(Hide);

(engineState, event);
},
~state=engineState,
(),
);

engineState |> StateEngineService.setState |> ignore;
};

let willUnmount = () => {
let engineState =
ManageEventEngineService.offCustomGlobalEventByEventName(
@@ -32,20 +87,9 @@ module Method = {
~eventName=ProgressUtils.getProgressHideCustomGlobalEventName(),
~state=engineState,
);
let engineState =
ManageEventEngineService.offCustomGlobalEventByEventName(
~eventName=ProgressUtils.getProgressFinishCustomGlobalEventName(),
~state=engineState,
);

engineState |> StateEngineService.setState |> ignore;
};

let showProgress = () => DomUtils.showDomFlex("wonder-progress");

let hideProgress = () => DomUtils.hideDom("wonder-progress");

let finish = () => hideProgress();
};

let component = ReasonReact.reducerComponent("Progress");
@@ -63,11 +107,26 @@ let reducer = (action, state) =>
),
percent: value,
})
| Show =>
ReasonReact.Update({
...state,
visibleStyle:
ReactUtils.addStyleProp("display", "flex", state.visibleStyle),
})
| Hide =>
ReasonReact.Update({
...state,
visibleStyle:
ReactUtils.addStyleProp("display", "none", state.visibleStyle),
})
};

let render = ({state, send}: ReasonReact.self('a, 'b, 'c)) =>
<article
id="wonder-progress" className="wonder-progress" key="WonderProgress">
id="wonder-progress"
className="wonder-progress"
key="WonderProgress"
style={state.visibleStyle}>
<div className="progress-content">
<div className="content-percent" style={state.style}>
{DomHelper.textEl(Method.buildWidthPercentStr(state.percent))}
@@ -81,75 +140,12 @@ let make = _children => {
initialState: () => {
percent: 0,
style: ReactDOMRe.Style.make(~width=Method.buildWidthPercentStr(0), ()),
visibleStyle: ReactDOMRe.Style.make(~display="none", ()),
},
reducer,
render: _self => render(_self),
didUpdate: ({oldSelf, newSelf}: ReasonReact.oldNewSelf('a, 'b, 'c)) =>
newSelf.state.percent === 100 ? Method.finish() : (),
didMount: ({state, send}: ReasonReact.self('a, 'b, 'c)) => {
let engineState = StateEngineService.unsafeGetState();

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=
ProgressUtils.getProgressChangePercentCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
send(
ChangePercent(
event.userData
|> OptionService.unsafeGet
|> WonderEditor.EventType.convertUserDataToInt,
),
);

(engineState, event);
},
~state=engineState,
(),
);

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressShowCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
Method.showProgress();

(engineState, event);
},
~state=engineState,
(),
);

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressHideCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
Method.hideProgress();

(engineState, event);
},
~state=engineState,
(),
);

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressFinishCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
Method.finish();

(engineState, event);
},
~state=engineState,
(),
);

engineState |> StateEngineService.setState |> ignore;
},
didMount: ({state, send}: ReasonReact.self('a, 'b, 'c)) =>
Method.didMount(send),
willUnmount: ({state, send}: ReasonReact.self('a, 'b, 'c)) =>
Method.willUnmount(),
};
@@ -4,8 +4,6 @@ let getProgressShowCustomGlobalEventName = () => "wd_editor_progress_show";

let getProgressHideCustomGlobalEventName = () => "wd_editor_progress_hide";

let getProgressFinishCustomGlobalEventName = () => "wd_editor_progress_finish";

let show = engineState => {
let (engineState, _) =
ManageEventEngineService.triggerCustomGlobalEvent(
@@ -45,15 +43,4 @@ let changePercent = (percent, engineState) => {
engineState;
};

let finish = engineState => {
let (engineState, _) =
ManageEventEngineService.triggerCustomGlobalEvent(
CreateCustomEventEngineService.create(
getProgressFinishCustomGlobalEventName(),
None,
),
engineState,
);

engineState;
};
let finish = engineState => engineState |> changePercent(100) |> hide;
@@ -21,81 +21,46 @@ let _ =
afterEach(() => restoreSandbox(refJsObjToSandbox(sandbox^)));

describe("test progress component", () => {
let _buildFakeProgressDom = (~display="flex", ()) => {
"style": {
"display": display,
},
};

test("test snapshot", () =>
_buildProgressComponent() |> ReactTestTool.createSnapshotAndMatch
);

describe("operate progress visible", () => {
let progressDom = ref(Obj.magic(-1));

beforeEach(() => {
_buildProgressComponent();
progressDom := _buildFakeProgressDom(~display="flex", ());
DomTool.stubFakeDomForQuerySelector(
sandbox,
"wonder-progress",
progressDom^,
);
});

describe("show progress", () =>
test("show progress dom", () => {
ProgressUtils.hide |> StateLogicService.getAndSetEngineState;
ProgressUtils.show |> StateLogicService.getAndSetEngineState;

(progressDom^)##style##display |> expect == "flex";
})
);

describe("hide progress", () =>
test("hide progress dom", () => {
ProgressUtils.hide |> StateLogicService.getAndSetEngineState;
describe("test didMount", () => {
test("bind change percent event", () => {
let send = ProgressTool.didMount(sandbox);

(progressDom^)##style##display |> expect == "none";
})
);

test("if percent === 100, hide progress", () => {
ProgressUtils.changePercent(100)
ProgressUtils.changePercent(10)
|> StateLogicService.getAndSetEngineState;

(progressDom^)##style##display |> expect == "none";
send |> expect |> toCalledWith([|Progress.ChangePercent(10)|]);
});
test("if finish, hide progress", () => {
ProgressUtils.finish |> StateLogicService.getAndSetEngineState;
test("bind show event", () => {
let send = ProgressTool.didMount(sandbox);

(progressDom^)##style##display |> expect == "none";
});
});
ProgressUtils.show |> StateLogicService.getAndSetEngineState;

describe("test off custom global event in willUnmount", () => {
let progressDom = ref(Obj.magic(-1));

beforeEach(() => {
_buildProgressComponent();
progressDom := _buildFakeProgressDom(~display="flex", ());
DomTool.stubFakeDomForQuerySelector(
sandbox,
"wonder-progress",
progressDom^,
);
send |> expect |> toCalledWith([|Progress.Show|]);
});
test("bind hide event", () => {
let send = ProgressTool.didMount(sandbox);

test("test off hide event", () => {
_buildProgressComponent();

Progress.Method.willUnmount();

ProgressUtils.hide |> StateLogicService.getAndSetEngineState;
ProgressUtils.show |> StateLogicService.getAndSetEngineState;

(progressDom^)##style##display |> expect == "flex";
send |> expect |> toCalledWith([|Progress.Show|]);
});
});

describe("test willUnmount", () =>
describe("off custom global event", () =>
test("test off hide event", () => {
let send = ProgressTool.didMount(sandbox);
ProgressTool.willUnmount();

ProgressUtils.show |> StateLogicService.getAndSetEngineState;

send |> expect |> not_ |> toCalledWith([|Progress.Show|]);
})
)
);
});
});
@@ -4,6 +4,11 @@ exports[`Progress component test progress component test snapshot 1`] = `
<article
className="wonder-progress"
id="wonder-progress"
style={
Object {
"display": "none",
}
}
>
<div
className="progress-content"
@@ -0,0 +1,28 @@
open Progress;

let buildState =
(
~percent=0,
~style=ReactDOMRe.Style.make(
~width=Progress.Method.buildWidthPercentStr(0),
(),
),
~visibleStyle=ReactDOMRe.Style.make(
~width=Progress.Method.buildWidthPercentStr(0),
(),
),
(),
) => {
percent,
style,
visibleStyle,
};

let didMount = sandbox => {
let send = SinonTool.createOneLengthStub(sandbox^);
Progress.Method.didMount(send);

send;
};

let willUnmount = () => Progress.Method.willUnmount();

0 comments on commit 7912f99

Please sign in to comment.
You can’t perform that action at this time.